-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
508 lines (274 loc) · 157 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>大圣巴巴的博客</title>
<subtitle>记录生活点滴，分享前端技术，学习新的知识，共同进步成长！</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://youcanping.coding.me/"/>
<updated>2018-08-04T06:17:23.016Z</updated>
<id>https://youcanping.coding.me/</id>
<author>
<name>大圣巴巴</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>CSS-清除浮动(.clearfix)</title>
<link href="https://youcanping.coding.me/2018/07/08/CSS-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8clearfix/"/>
<id>https://youcanping.coding.me/2018/07/08/CSS-清除浮动clearfix/</id>
<published>2018-07-08T23:40:03.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="浮动带来的问题"><a href="#浮动带来的问题" class="headerlink" title="浮动带来的问题"></a>浮动带来的问题</h2><p>我们在网页中经常会使用<code>float</code>来进行图文混排, 但当文字在父容器中的高度比浮动元素小时，就会出现浮动元素溢出父容器，如果我们给父容器设置边框，就会出现如下效果：</p><ul><li><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/[email protected]" alt="" title=""> </div> <div class="image-caption"></div> </figure> 如果容器内的元素都是浮动元素，则父容器的高度将是0，我们称之为高度坍塌，效果如下：</li><li><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/[email protected]" alt="" title=""> </div> <div class="image-caption"></div> </figure><h2 id="清除浮动的方法"><a href="#清除浮动的方法" class="headerlink" title="清除浮动的方法"></a>清除浮动的方法</h2>为了解决上述浮动带来的问题，达到如下效果，有人总结了以下方法：</li><li><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/[email protected]" alt="" title=""> </div> <div class="image-caption"></div> </figure></li></ul><h3 id="方案一"><a href="#方案一" class="headerlink" title="方案一"></a>方案一</h3><p>设置父容器的高度。</p><ul><li>优点：简单、粗暴。</li><li>缺点：需要知道子元素的高度和个数来确定父容器的高度，不够灵活。</li></ul><h3 id="方案二"><a href="#方案二" class="headerlink" title="方案二"></a>方案二</h3><p>在浮动元素的末尾添加空标签，设置<code>clear:both</code>。</p><ul><li>优点：简单、粗暴。</li><li>缺点：需要添加无用的标签，不利于样式与结构分离，不易于后期维护。</li></ul><h3 id="方案三"><a href="#方案三" class="headerlink" title="方案三"></a>方案三</h3><p>给父容器也设置浮动<code>float</code>。</p><ul><li>优点：简单、粗暴</li><li>缺点：改变父容器的布局，会影响父容器的后面元素的位置。</li></ul><h3 id="方案四"><a href="#方案四" class="headerlink" title="方案四"></a>方案四</h3><p>给父容器设置<code>overflow:hide/auto</code>。</p><ul><li>优点：简单、代码量少。</li><li>缺点：会影响子元素内容溢出的显示问题。</li></ul><h3 id="方案五"><a href="#方案五" class="headerlink" title="方案五"></a>方案五</h3><p>给父容器设置<code>display:table</code>。</p><ul><li>优点：简单、代码量少。</li><li>缺点：改变了父容器盒子模型属性，会造成一些未知影响。</li></ul><h3 id="方案六"><a href="#方案六" class="headerlink" title="方案六"></a>方案六</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> content: ''; //有人也会设置 \200B 零宽度空格</span><br><span class="line"> <span class="selector-tag">display</span>: <span class="selector-tag">block</span>;</span><br><span class="line"> <span class="selector-tag">clear</span>: <span class="selector-tag">both</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span>{</span><br><span class="line"> *zoom: 1; //对 IE/6/7 的兼容性处理原理未知</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>优点：不改变父容器的布局和盒子模型，没有副作用。</li><li>缺点：代码量多。</li></ul><h3 id="方案七"><a href="#方案七" class="headerlink" title="方案七"></a>方案七</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>,<span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: table;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span>{</span><br><span class="line"> *zoom: 1; //对 IE/6/7 的兼容性处理原理未知</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>原理：<code>display: table</code>会生成匿名元素<code>table-cell</code>触发<code>BFC</code>。</li><li>优点：不改变父容器的布局和盒子模型，没有副作用。</li><li>缺点：代码量多。<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><code>方案六</code>合<code>方案七</code>为终极解决方案，选一个即可。</li></ul>]]></content>
<summary type="html">
<h2 id="浮动带来的问题"><a href="#浮动带来的问题" class="headerlink" title="浮动带来的问题"></a>浮动带来的问题</h2><p>我们在网页中经常会使用<code>float</code>来进行图文混排, 但当文字在父容器中的高度
</summary>
<category term="CSS" scheme="https://youcanping.coding.me/categories/CSS/"/>
<category term="clearfix" scheme="https://youcanping.coding.me/tags/clearfix/"/>
<category term="清除浮动" scheme="https://youcanping.coding.me/tags/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8/"/>
</entry>
<entry>
<title>移动端问题汇总</title>
<link href="https://youcanping.coding.me/2018/06/28/mobile-bug-collection/"/>
<id>https://youcanping.coding.me/2018/06/28/mobile-bug-collection/</id>
<published>2018-06-28T14:52:30.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="移动端-active伪类无效的解决方法"><a href="#移动端-active伪类无效的解决方法" class="headerlink" title="移动端:active伪类无效的解决方法"></a>移动端:active伪类无效的解决方法</h2><h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><ul><li><p>Safari Mobile 默认不使用:active 状态，除非元素上或<body>上有一个touchstart 事件处理器。</body></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">ontouchstart</span>=<span class="string">""</span>></span> <span class="comment"><!-- Hack to activate :active CSS selector on iOS browsers.--></span></span><br></pre></td></tr></table></figure></li><li><p>给<code>body</code>添加<code>touchstart</code>事件。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.body.addEventListener(<span class="string">'touchstart'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="comment">//...空函数即可});</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><blockquote><ul><li><a href="https://blog.csdn.net/freshlover/article/details/43735273" target="_blank" rel="noopener">移动端:active伪类无效的解决方法</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active" target="_blank" rel="noopener">MDN-web-docs :active</a></li></ul></blockquote><h2 id="监听文档是否处于激活状态"><a href="#监听文档是否处于激活状态" class="headerlink" title="监听文档是否处于激活状态"></a>监听文档是否处于激活状态</h2><h3 id="解决方法-1"><a href="#解决方法-1" class="headerlink" title="解决方法"></a>解决方法</h3><p>使用H5新的监听文档可见状态事件<code>visibilityChange</code>判断当前页面是否处于激活状态</p><h3 id="visibilityChange事件触发条件"><a href="#visibilityChange事件触发条件" class="headerlink" title="visibilityChange事件触发条件"></a>visibilityChange事件触发条件</h3><blockquote><ul><li><code>PC</code>端浏览器的标签页切换。</li><li><code>PC</code>端浏览器最大化最小化，<code>Opera</code>例外。</li><li>移动端锁屏。</li><li>移动端进入后台和进入前台。</li><li>移动端浏览器TAB切换。</li></ul></blockquote><ul><li><p>方式一</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> hiddenProperty = <span class="string">'hidden'</span> <span class="keyword">in</span> <span class="built_in">document</span> ? <span class="string">'hidden'</span> :</span><br><span class="line"> <span class="string">'webkitHidden'</span> <span class="keyword">in</span> <span class="built_in">document</span> ? <span class="string">'webkitHidden'</span> :</span><br><span class="line"> <span class="string">'mozHidden'</span> <span class="keyword">in</span> <span class="built_in">document</span> ? <span class="string">'mozHidden'</span> :</span><br><span class="line"> <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">var</span> visibilityChangeEvent = hiddenProperty.replace(<span class="regexp">/hidden/i</span>, <span class="string">'visibilitychange'</span>);</span><br><span class="line"><span class="keyword">var</span> onVisibilityChange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>[hiddenProperty]) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'页面非激活'</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'页面激活'</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">document</span>.addEventListener(visibilityChangeEvent, onVisibilityChange);</span><br></pre></td></tr></table></figure></li><li><p>方式二</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置隐藏属性和改变可见属性的事件的名称</span></span><br><span class="line"><span class="keyword">var</span> hidden, visibilityChange;</span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.hidden !== <span class="string">"undefined"</span>) { <span class="comment">// Opera 12.10 and Firefox 18 and later support</span></span><br><span class="line"> hidden = <span class="string">"hidden"</span>;</span><br><span class="line"> visibilityChange = <span class="string">"visibilitychange"</span>;</span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.msHidden !== <span class="string">"undefined"</span>) {</span><br><span class="line"> hidden = <span class="string">"msHidden"</span>;</span><br><span class="line"> visibilityChange = <span class="string">"msvisibilitychange"</span>;</span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.webkitHidden !== <span class="string">"undefined"</span>) {</span><br><span class="line"> hidden = <span class="string">"webkitHidden"</span>;</span><br><span class="line"> visibilityChange = <span class="string">"webkitvisibilitychange"</span>;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleVisibilityChange</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>[hidden]) {</span><br><span class="line"> <span class="comment">// 非激活状态</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">//页面激活</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">document</span>.addEventListener(visibilityChange, handleVisibilityChange, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure></li></ul><h3 id="参考资料-1"><a href="#参考资料-1" class="headerlink" title="参考资料"></a>参考资料</h3><blockquote><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API" target="_blank" rel="noopener">MDN-web-docs Page_Visibility_API</a></li></ul></blockquote>]]></content>
<summary type="html">
<h2 id="移动端-active伪类无效的解决方法"><a href="#移动端-active伪类无效的解决方法" class="headerlink" title="移动端:active伪类无效的解决方法"></a>移动端:active伪类无效的解决方法</h2><h3 i
</summary>
<category term="问题汇总" scheme="https://youcanping.coding.me/categories/%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/"/>
<category term="移动端问题汇总" scheme="https://youcanping.coding.me/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/"/>
</entry>
<entry>
<title>浏览器同源策略</title>
<link href="https://youcanping.coding.me/2018/06/27/web-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/"/>
<id>https://youcanping.coding.me/2018/06/27/web-浏览器同源策略/</id>
<published>2018-06-27T09:57:36.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<blockquote><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener">MDN-浏览器的同源策略</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options" target="_blank" rel="noopener">MDN-X-Frame-Options 响应头</a></li><li><a href="https://blog.csdn.net/tim_tsang/article/details/46124527" target="_blank" rel="noopener">CSDN-Web安全之同源策略与跨域访问</a></li><li><a href="http://www.planabc.net/2008/09/01/window_name_transport/" target="_blank" rel="noopener">使用 window.name 解决跨域问题</a></li></ul></blockquote>]]></content>
<summary type="html">
<blockquote>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener">MDN-
</summary>
<category term="web" scheme="https://youcanping.coding.me/categories/web/"/>
<category term="同源策略" scheme="https://youcanping.coding.me/tags/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/"/>
<category term="iframe跨域问题" scheme="https://youcanping.coding.me/tags/iframe%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/"/>
<category term="X-Frame-Options" scheme="https://youcanping.coding.me/tags/X-Frame-Options/"/>
</entry>
<entry>
<title>JavaScript 获取IP地址</title>
<link href="https://youcanping.coding.me/2018/06/26/JavaScript-IP/"/>
<id>https://youcanping.coding.me/2018/06/26/JavaScript-IP/</id>
<published>2018-06-26T15:04:44.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://segmentfault.com/q/1010000010330099" target="_blank" rel="noopener">前端WEB获取IP地址问题</a></p></blockquote><h2 id="淘宝IP地址库"><a href="#淘宝IP地址库" class="headerlink" title="淘宝IP地址库"></a>淘宝IP地址库</h2><p>本人比较喜欢用淘宝的IP地址接口，支持查询本机IP和指定IP，精确度也挺高的。</p><ul><li><a href="http://ip.taobao.com/" target="_blank" rel="noopener">淘宝IP地址库首页</a></li></ul><h3 id="使用说明"><a href="#使用说明" class="headerlink" title="使用说明"></a>使用说明</h3><ol><li><p>请求接口（GET）：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/service/getIpInfo.php?ip=[ip地址字串]</span><br></pre></td></tr></table></figure></li><li><p>响应信息：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">（json格式的）国家 、省（自治区或直辖市）、市（县）、运营商</span><br></pre></td></tr></table></figure></li><li><p>返回数据格式：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"code"</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">"data"</span>: {</span><br><span class="line"> <span class="attr">"ip"</span>: <span class="string">"210.75.225.254"</span>,</span><br><span class="line"> <span class="attr">"country"</span>: <span class="string">"中国"</span>,</span><br><span class="line"> <span class="attr">"area"</span>: <span class="string">"华北"</span>,</span><br><span class="line"> <span class="attr">"region"</span>: <span class="string">"北京市"</span>,</span><br><span class="line"> <span class="attr">"city"</span>: <span class="string">"北京市"</span>,</span><br><span class="line"> <span class="attr">"county"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"isp"</span>: <span class="string">"电信"</span>,</span><br><span class="line"> <span class="attr">"country_id"</span>: <span class="string">"86"</span>,</span><br><span class="line"> <span class="attr">"area_id"</span>: <span class="string">"100000"</span>,</span><br><span class="line"> <span class="attr">"region_id"</span>: <span class="string">"110000"</span>,</span><br><span class="line"> <span class="attr">"city_id"</span>: <span class="string">"110000"</span>,</span><br><span class="line"> <span class="attr">"county_id"</span>: <span class="string">"-1"</span>,</span><br><span class="line"> <span class="attr">"isp_id"</span>: <span class="string">"100017"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><ul><li>其中code的值的含义为，0：成功，1：失败。</li><li>获取本机IP<a href="http://ip.taobao.com/service/getIpInfo.php?ip=myip" target="_blank" rel="noopener">http://ip.taobao.com/service/getIpInfo.php?ip=myip</a></li></ul></blockquote><h2 id="httpbin"><a href="#httpbin" class="headerlink" title="httpbin"></a>httpbin</h2><blockquote><p><a href="http://httpbin.org/" target="_blank" rel="noopener">http://httpbin.org/</a></p></blockquote><h3 id="获取IP地址"><a href="#获取IP地址" class="headerlink" title="获取IP地址"></a>获取IP地址</h3><p><a href="http://httpbin.org/ip" target="_blank" rel="noopener">http://httpbin.org/ip</a></p><h3 id="返回数据"><a href="#返回数据" class="headerlink" title="返回数据"></a>返回数据</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"origin"</span>: <span class="string">"67.209.191.219"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://segmentfault.com/q/1010000010330099" target="_blank" rel="noopener">前端WEB获取IP地址问题</a></p>
</blockquote>
<h2
</summary>
<category term="JavaScript" scheme="https://youcanping.coding.me/categories/JavaScript/"/>
<category term="JavaScript 获取IP地址" scheme="https://youcanping.coding.me/tags/JavaScript-%E8%8E%B7%E5%8F%96IP%E5%9C%B0%E5%9D%80/"/>
</entry>
<entry>
<title>JavaScript学习笔记-基础知识</title>
<link href="https://youcanping.coding.me/2018/05/21/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/"/>
<id>https://youcanping.coding.me/2018/05/21/JavaScript学习笔记-基础知识/</id>
<published>2018-05-21T15:20:26.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h2><p>所谓<strong>标识符</strong>，就是只变量、函数、属性名的名字，或者函数的参数。<br>标识符的组成规则：</p><ul><li>第一个字符必须是一个字母、下划线(_)或一个美元符号($);</li><li>其他字符可以是字母、下划线、美元符号或数字。</li></ul><blockquote><p>按照惯例，ECMAScript标识符采用驼峰命名规则(Camel-Case)，一个单词字母小写其他单词首字母大写（小驼峰命名法），或全面单词首字母都大写（大驼峰命名法），构造函数建议采用大驼峰命名法。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">var</span> abc123 = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">var</span> _temp = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">var</span> $list = [];</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name, age</span>)</span>{};</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure><h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><h3 id="ECMAScript5中有5种简单数据类型"><a href="#ECMAScript5中有5种简单数据类型" class="headerlink" title="ECMAScript5中有5种简单数据类型"></a>ECMAScript5中有5种简单数据类型</h3><table><thead><tr><th style="text-align:left">类型</th><th style="text-align:left">值</th></tr></thead><tbody><tr><td style="text-align:left">Undefined</td><td style="text-align:left">undefined</td></tr><tr><td style="text-align:left">Null</td><td style="text-align:left">null</td></tr><tr><td style="text-align:left">Boolean</td><td style="text-align:left">true,false</td></tr><tr><td style="text-align:left">Number</td><td style="text-align:left">整数和小数</td></tr><tr><td style="text-align:left">String</td><td style="text-align:left">‘abc’</td></tr></tbody></table><h3 id="ECMAScript复杂数据类型"><a href="#ECMAScript复杂数据类型" class="headerlink" title="ECMAScript复杂数据类型"></a>ECMAScript复杂数据类型</h3><p><code>Object</code>，是由一组<strong>无序</strong>的键值对组成。</p><h2 id="类型检查"><a href="#类型检查" class="headerlink" title="类型检查"></a>类型检查</h2><h3 id="typeof和constructor判断基本数据类型"><a href="#typeof和constructor判断基本数据类型" class="headerlink" title="typeof和constructor判断基本数据类型"></a>typeof和constructor判断基本数据类型</h3><table><thead><tr><th style="text-align:left">variable</th><th style="text-align:left">typeof variable</th><th style="text-align:left">variable.constructor</th></tr></thead><tbody><tr><td style="text-align:left"><code>{an: "object"}</code></td><td style="text-align:left"><code>"object"</code></td><td style="text-align:left"><code>Object</code></td></tr><tr><td style="text-align:left"><code>["an", "array"]</code></td><td style="text-align:left"><code>"object"</code></td><td style="text-align:left"><code>Array</code></td></tr><tr><td style="text-align:left"><code>function(){}</code></td><td style="text-align:left"><code>"function"</code></td><td style="text-align:left"><code>Function</code></td></tr><tr><td style="text-align:left"><code>"a string"</code></td><td style="text-align:left"><code>"string"</code></td><td style="text-align:left"><code>String</code></td></tr><tr><td style="text-align:left"><code>89</code></td><td style="text-align:left"><code>"number"</code></td><td style="text-align:left"><code>Number</code></td></tr><tr><td style="text-align:left"><code>true</code></td><td style="text-align:left"><code>"boolean"</code></td><td style="text-align:left"><code>Boolean</code></td></tr><tr><td style="text-align:left"><code>new User()</code></td><td style="text-align:left"><code>"object"</code></td><td style="text-align:left"><code>User</code></td></tr><tr><td style="text-align:left"><code>null</code></td><td style="text-align:left"><code>"object"</code></td><td style="text-align:left"><code>报错</code></td></tr><tr><td style="text-align:left"><code>undefined</code></td><td style="text-align:left"><code>"undefined"</code></td><td style="text-align:left"><code>报错</code></td></tr></tbody></table><ul><li>对未初始化，未定义的变量使用<code>typeof</code>操作费返回<code>undefined</code>，可以利用这以特性安全的判断变量是否定义，否则使用未定义的变量会导致页面报错。</li><li><code>null</code>被认为是空对象的引用，使用<code>typeof</code>操作符返回<code>object</code>。</li><li>数组也是对象，<code>typeof</code>返回<code>object</code>。</li><li>当变量是<code>null</code>或<code>undefined</code>时，调用<code>constructor</code>会报错。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> type = <span class="keyword">typeof</span> <span class="number">1</span>; <span class="comment">// "number"</span></span><br></pre></td></tr></table></figure><h3 id="使用instanceof操作符判断复杂数据类型"><a href="#使用instanceof操作符判断复杂数据类型" class="headerlink" title="使用instanceof操作符判断复杂数据类型"></a>使用instanceof操作符判断复杂数据类型</h3><p><code>instanceof</code> 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。</p><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof" target="_blank" rel="noopener">MDN instanceof</a></li></ul><h4 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h4><blockquote><p>object instanceof constructor</p><ul><li>object 要检测的对象</li><li>constructor 某个构造函数</li></ul></blockquote><h4 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">C</span>(<span class="params"></span>)</span>{};</span><br><span class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> C(){};</span><br><span class="line">o <span class="keyword">instanceof</span> C <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h2 id="Undefined类型"><a href="#Undefined类型" class="headerlink" title="Undefined类型"></a>Undefined类型</h2><ul><li><code>Undefined</code>只有一个值<code>undefined</code>，未初始化的变量默认值就是<code>undefined</code>;</li><li>不需要显示声明一个变量的初始值为<code>undefined</code>;</li><li>使用<code>typeof</code>操作一个未定义的变量返回<code>undefined</code>;</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">if</span>(a !== <span class="literal">undefined</span>){</span><br><span class="line"> <span class="comment">// todo</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="Null类型"><a href="#Null类型" class="headerlink" title="Null类型"></a>Null类型</h2><ul><li><code>Null</code>类型只有一个值<code>null</code>，标识空对象的指针。</li><li>对定义的变量<strong>将来</strong>用于保存对象要显示初始化赋值<code>null</code>，有利于区分<code>null</code>和<code>undefined</code>;</li><li><code>undefined</code>值是派生自<code>null</code>，<code>==</code>测试返回<code>true</code>;</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">if</span>(obj !== <span class="literal">null</span>){</span><br><span class="line"> <span class="comment">// todo</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="Booloean类型"><a href="#Booloean类型" class="headerlink" title="Booloean类型"></a>Booloean类型</h2><h3 id="转换规则"><a href="#转换规则" class="headerlink" title="转换规则"></a>转换规则</h3><table><thead><tr><th style="text-align:left">数据类型</th><th style="text-align:left">true</th><th style="text-align:left">false</th></tr></thead><tbody><tr><td style="text-align:left">String</td><td style="text-align:left">非空字符串</td><td style="text-align:left"><code>""</code></td></tr><tr><td style="text-align:left">Number</td><td style="text-align:left">非0数字</td><td style="text-align:left"><code>0</code></td></tr><tr><td style="text-align:left">Object</td><td style="text-align:left">非空指针对象</td><td style="text-align:left"><code>null</code></td></tr><tr><td style="text-align:left">Undefined</td><td style="text-align:left">不适用n/a</td><td style="text-align:left"><code>undefined</code></td></tr></tbody></table><blockquote><p>总结：<code>""</code>、<code>0</code>、<code>undefined</code>、<code>null</code> 都为<code>false</code>，反之为<code>true</code>;<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Boolean</span>(<span class="string">"abc"</span>); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="string">""</span>); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="number">0</span>); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="keyword">void</span> <span class="number">0</span>); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Boolean</span>({}); <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p></blockquote><h3 id="布尔操作符转换规则"><a href="#布尔操作符转换规则" class="headerlink" title="布尔操作符转换规则"></a>布尔操作符转换规则</h3><blockquote><p>对<code>非Boolean类型</code>的值进行2次取反得到<code>boolean</code>值，第一个操作符对操作数进行布尔值转换然后取反，第二个操作数得到该值的真正<code>boolean</code>值。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">!!<span class="string">'A'</span>; <span class="comment">// true</span></span><br><span class="line">!!<span class="string">''</span>; <span class="comment">// false</span></span><br><span class="line">!!<span class="number">0</span>; <span class="comment">// false</span></span><br><span class="line">!!(<span class="keyword">void</span> <span class="number">0</span>); <span class="comment">// false</span></span><br><span class="line">!!{}; <span class="comment">// true</span></span><br></pre></td></tr></table></figure></p></blockquote><h2 id="Number类型"><a href="#Number类型" class="headerlink" title="Number类型"></a>Number类型</h2><h3 id="数值范围"><a href="#数值范围" class="headerlink" title="数值范围"></a>数值范围</h3><ul><li>正无穷大 <code>Number.POSITIVE_INFINITY</code>，<code>Infinity</code>；</li><li>负无穷大 <code>Number.NEGATIVE_INFINITY</code>，<code>-Infinity</code>；</li><li>最大值 <code>Number.MAX_VALUE</code>；</li><li>最小值 <code>Number.MIN_VALUE</code>；</li><li>判断数值是否在有效范围 <code>isFinite()</code>；</li></ul><h3 id="数值转换"><a href="#数值转换" class="headerlink" title="数值转换"></a>数值转换</h3><ul><li><code>Number()</code>能转换任何类型，<code>parseInt()</code>，<code>parseFloat()</code>只能转换字符串。</li><li><code>Number</code>转换字符串，如果字符串包含无效数值返回<code>NaN</code>;</li><li><code>Number</code>转换的值是<code>undefined</code>，返回<code>NaN</code>;</li><li><code>Number</code>转换的是对象，先找<code>valueOf()</code>方法取值，没有再找<code>toString()</code>方法取值；</li></ul><blockquote><ul><li><strong><code>1/0</code>不会报错，返回<code>Infinity</code></strong>；</li><li><strong><code>0/0</code>不会报错，返回<code>NaN</code></strong>；</li><li><strong>一元加操作符<code>+</code>，和<code>Number</code>函数相同</strong>;</li><li><strong><code>Number('123A')</code>返回<code>NaN</code>，而<code>parseInt('123A')</code>返回<code>123</code></strong>;</li><li>无论什么时候使用<code>parseInt()</code>都需要制定第二个参数基数，表明转换十进制如<code>parseInt('076', 10)</code>，否则会按照八进制处理；</li></ul></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span> - <span class="string">'A'</span>; <span class="comment">// NaN</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="built_in">Number</span>(<span class="string">'A'</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> valueOf: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'valueOf'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'A'</span></span><br><span class="line"> },</span><br><span class="line"> toString: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'toString'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'1'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">Number</span>(obj); <span class="comment">// => NaN ,再没有valueOf方法的前提下才会调用toString方法。</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"123abc"</span>); <span class="comment">// => 123</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="string">'123abc'</span>); <span class="comment">// => NaN</span></span><br></pre></td></tr></table></figure><h2 id="NaN"><a href="#NaN" class="headerlink" title="NaN"></a>NaN</h2><blockquote><p>NaN （not a number） 即非数值</p></blockquote><ul><li><code>NaN</code>与任何值不相等，包括自己；</li><li><code>NaN</code>参与的运算返回的都是<code>NaN</code>;</li><li><code>isNaN()</code>函数用于判断值是否是有效数字，引用类型则调用先<code>valueOf</code>方法取值，没有则调用<code>toString()</code>取值，同<code>Number()</code>。</li><li><code>NaN</code>参与的比较返回的都是<code>false</code>;</li><li><strong><code>0/0</code>不会报错，返回<code>NaN</code></strong>;</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">isNaN</span>({}); <span class="comment">//true</span></span><br><span class="line"><span class="built_in">isNaN</span>({<span class="attr">valueOf</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span> <span class="number">123</span>}}); <span class="comment">// false;</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h2><p>所谓<strong>标识符</strong>，就是只变量、函数、属性名的名字，或者函数的参数。<br>标识符的组成规则：</p>
<
</summary>
<category term="JavaScript" scheme="https://youcanping.coding.me/categories/JavaScript/"/>
<category term="JavaScript学习笔记" scheme="https://youcanping.coding.me/categories/JavaScript/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="JavaScript" scheme="https://youcanping.coding.me/tags/JavaScript/"/>
</entry>
<entry>
<title>iFrame使用技巧汇总</title>
<link href="https://youcanping.coding.me/2018/05/13/iFrame%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7%E6%B1%87%E6%80%BB/"/>
<id>https://youcanping.coding.me/2018/05/13/iFrame使用技巧汇总/</id>
<published>2018-05-13T22:01:51.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<p>该博文主要是记录在开发过程中使用<code>iframe</code>时遇到问题，收集的解决方法汇总。</p><h3 id="iframe移动设备垂直滚动问题"><a href="#iframe移动设备垂直滚动问题" class="headerlink" title="iframe移动设备垂直滚动问题"></a><code>iframe</code>移动设备垂直滚动问题</h3><p>移动开发过程中使用<code>iFrame</code>时，出现在<code>iOS10</code>以上系统出现滚动异常问题，该问题已经有国外大拿提供了解决方案，请看我的另一篇博文<a href="https://youcanping.cn/2017/12/28/iframe-scroll-in-ios/" target="_blank" rel="noopener">《解决iframe嵌入页面在iOS不能滚动问题》</a></p><h3 id="禁止iframe产生历史记录"><a href="#禁止iframe产生历史记录" class="headerlink" title="禁止iframe产生历史记录"></a>禁止<code>iframe</code>产生历史记录</h3><h4 id="方式一"><a href="#方式一" class="headerlink" title="方式一"></a>方式一</h4><p><code>url</code>链接变化，不通过改变<code>iframe</code>的<code>src</code>属性，而是每次都创建一个新的<code>iframe</code>指向新的<code>url</code>;<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ifr = <span class="built_in">document</span>.createElement(<span class="string">'iframe'</span>);</span><br><span class="line"> ifr.src = <span class="string">'https://www.jd.com'</span>;</span><br><span class="line"> <span class="built_in">document</span>.body.appendChild(ifr);</span><br></pre></td></tr></table></figure></p><h4 id="方式二"><a href="#方式二" class="headerlink" title="方式二"></a>方式二</h4><p>通过操作<code>iFrame</code>的<code>location</code>来改变<code>iFrame</code>指向的<code>url</code>;<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ifr = <span class="built_in">document</span>.getElementById(<span class="string">'ifr'</span>);</span><br><span class="line">ifr.contentWindow.location.replace(<span class="string">'https://www.jd.com'</span>);</span><br></pre></td></tr></table></figure></p><h3 id="iframe页面使用viewport进行页面缩放问题"><a href="#iframe页面使用viewport进行页面缩放问题" class="headerlink" title="iframe页面使用viewport进行页面缩放问题"></a><code>iframe</code>页面使用<code>viewport</code>进行页面缩放问题</h3><p>在移动开发过程中，嵌入的三方页面，使用<a href="http://www.aliued.com/?p=3166" target="_blank" rel="noopener">高清屏页面渲染方案</a>，这时就会出现子页面会超出页面容器放大了，出现该问题，是因为父子容器设置的缩放比不一致导致的。</p><h4 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h4><ul><li>父子容器设置的<code>viewport</code>保持一致即可。</li><li>父容器不设置<code>viewport</code>，就不出现父子容器<code>viewport</code>冲突问题。</li></ul><h4 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h4><ul><li>父容器<code>viewport</code>设置</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"</span> /></span></span><br></pre></td></tr></table></figure><ul><li><code>iframe</code>子页面使用高清屏解决方案，进行页面缩放，如<code>iPhone5</code>;</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no"</span>></span></span><br></pre></td></tr></table></figure><h3 id="iframe在iOS部分机型宽度问题"><a href="#iframe在iOS部分机型宽度问题" class="headerlink" title="iframe在iOS部分机型宽度问题"></a><code>iframe</code>在<code>iOS</code>部分机型宽度问题</h3><h4 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h4><p><code>iframe</code>嵌入的页面有横向滚动模块，使用了<code>overflow-x: auto;</code>样式，这个时候嵌入页面的宽度会撑大页面，导致<code>iframe</code>出现了横向滚动。<br><img src="http://our9i4zgx.bkt.clouddn.com/QQ20180514-222410.gif" style="width:320px;"></p><h4 id="解决方式"><a href="#解决方式" class="headerlink" title="解决方式"></a>解决方式</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"http://h5.m.taopiaopiao.com"</span> <span class="attr">frameborder</span>=<span class="string">"0"</span> <span class="attr">height</span>=<span class="string">"100%"</span> <span class="attr">scrolling</span>=<span class="string">'no'</span> <span class="attr">style</span>=<span class="string">"width: 1px; min-width: 100%; *width: 100%;"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="移动端iframe终极方案"><a href="#移动端iframe终极方案" class="headerlink" title="移动端iframe终极方案"></a>移动端<code>iframe</code>终极方案</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.iframe-container</span>{</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: auto;</span><br><span class="line"> <span class="attribute">overflow</span>: auto;</span><br><span class="line"> <span class="attribute">-webkit-overflow-scrolling</span>:touch;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.iframe-container</span> <span class="selector-tag">iframe</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">1px</span>;</span><br><span class="line"> *width: 100%;</span><br><span class="line"> <span class="selector-tag">min-width</span>: 100%;</span><br><span class="line"> <span class="comment">/*width: 100%;*/</span></span><br><span class="line"> <span class="comment">/*height: 100%;*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--height="100%"要写在行内，写在class中不生效--></span></span><br><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"https://h5.m.taopiaopiao.com"</span> <span class="attr">scrolling</span>=<span class="string">'no'</span> <span class="attr">frameborder</span>=<span class="string">"0"</span> <span class="attr">height</span>=<span class="string">"100%"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br></pre></td></tr></table></figure><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/[email protected]" alt="" title=""> </div> <div class="image-caption"></div> </figure>]]></content>
<summary type="html">
<p>该博文主要是记录在开发过程中使用<code>iframe</code>时遇到问题，收集的解决方法汇总。</p>
<h3 id="iframe移动设备垂直滚动问题"><a href="#iframe移动设备垂直滚动问题" class="headerlink" title="i
</summary>
<category term="HTML5" scheme="https://youcanping.coding.me/categories/HTML5/"/>
<category term="iframe" scheme="https://youcanping.coding.me/tags/iframe/"/>
<category term="iOS iframe width" scheme="https://youcanping.coding.me/tags/iOS-iframe-width/"/>
</entry>
<entry>
<title>input事件中文输入优化</title>
<link href="https://youcanping.coding.me/2018/05/06/input%E4%BA%8B%E4%BB%B6%E4%BC%98%E5%8C%96/"/>
<id>https://youcanping.coding.me/2018/05/06/input事件优化/</id>
<published>2018-05-06T23:57:07.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<p>我们在处理input输入框实时输入状态时，一般都是绑定<code>input</code>事件，但是在中文输入法下，会出现拼音在输入框中也会触发<code>input</code>事件，并不是我们选择完汉子后触发输入事件，出现这种bug在某些应用场景就显得不那么优化，如根据用户输入内容实时查询信息，输入框中的拼音并不是我们想要查询的关键字，那如何只在用户选择汉子后触发<code>input</code>事件呢？<br>最近在看<code>Vue.js</code>的<code>input</code>使用<code>v-model</code>指令时，就解决了中文输入法的问题。 </p><h3 id="解决思路"><a href="#解决思路" class="headerlink" title="解决思路"></a>解决思路</h3><p>使用<code>compositionstart</code>和<code>compositionend</code>,来处理中文输入问题。</p><ul><li><code>compositionstart</code>：当浏览器有非直接的文字输入时, <code>compositionstart</code>事件会以同步模式触发。</li><li><code>compositionend</code>：当浏览器是直接的文字输入时, <code>compositionend</code>会以同步模式触发。</li></ul><h3 id="传统解决思路"><a href="#传统解决思路" class="headerlink" title="传统解决思路"></a>传统解决思路</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"name"</span> /></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> node = <span class="built_in">document</span>.querySelector(<span class="string">'#name'</span>);</span><br><span class="line"><span class="keyword">var</span> cpLock = <span class="literal">false</span>;</span><br><span class="line">node.addEventListener(<span class="string">'compositionstart'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> cpLock = <span class="literal">true</span>;</span><br><span class="line">})</span><br><span class="line">node.addEventListener(<span class="string">'compositionend'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> cpLock = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">if</span>(!cpLock) <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">})</span><br><span class="line">node.addEventListener(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(!cpLock) <span class="built_in">console</span>.log(<span class="keyword">this</span>.value);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="Vue-js的解决思路"><a href="#Vue-js的解决思路" class="headerlink" title="Vue.js的解决思路"></a>Vue.js的解决思路</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"name"</span> /></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> node = <span class="built_in">document</span>.querySelector(<span class="string">'#name'</span>);</span><br><span class="line"> node.addEventListener(<span class="string">'compositionstart'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> e.target.composing = <span class="literal">true</span>;</span><br><span class="line"> });</span><br><span class="line"> node.addEventListener(<span class="string">'compositionend'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(!e.target.composing){<span class="keyword">return</span> <span class="literal">false</span>}</span><br><span class="line"> e.target.composing = <span class="literal">false</span>;</span><br><span class="line"> trigger(e.target, <span class="string">'input'</span>);</span><br><span class="line"> });</span><br><span class="line"> node.addEventListener(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(e.target.composing){</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.getElementById(<span class="string">"show_name"</span>).innerHTML = e.target.value;</span><br><span class="line"> });</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">trigger</span>(<span class="params">el, type</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> e = <span class="built_in">document</span>.createEvent(<span class="string">'HTMLEvents'</span>);</span><br><span class="line"> e.initEvent(type, <span class="literal">true</span>, <span class="literal">true</span>);</span><br><span class="line"> el.dispatchEvent(e);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h3 id="效果展示"><a href="#效果展示" class="headerlink" title="效果展示"></a>效果展示</h3><iframe height="265" scrolling="no" title="input-demo" src="//codepen.io/youcanping/embed/YLrBNW/?height=265&theme-id=0&default-tab=js,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="https://codepen.io/youcanping/pen/YLrBNW/" target="_blank" rel="noopener">input-demo</a> by youcanping2008 (<a href="https://codepen.io/youcanping" target="_blank" rel="noopener">@youcanping</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br></iframe>]]></content>
<summary type="html">
<p>我们在处理input输入框实时输入状态时，一般都是绑定<code>input</code>事件，但是在中文输入法下，会出现拼音在输入框中也会触发<code>input</code>事件，并不是我们选择完汉子后触发输入事件，出现这种bug在某些应用场景就显得不那么优化，如根据
</summary>
<category term="HTML5" scheme="https://youcanping.coding.me/categories/HTML5/"/>
<category term="JavaScript" scheme="https://youcanping.coding.me/categories/HTML5/JavaScript/"/>
<category term="compostionstart" scheme="https://youcanping.coding.me/tags/compostionstart/"/>
<category term="compostionend" scheme="https://youcanping.coding.me/tags/compostionend/"/>
<category term="input" scheme="https://youcanping.coding.me/tags/input/"/>
</entry>
<entry>
<title>NPM安装与卸载包</title>
<link href="https://youcanping.coding.me/2018/03/30/npm-install-package/"/>
<id>https://youcanping.coding.me/2018/03/30/npm-install-package/</id>
<published>2018-03-30T15:33:45.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="NPM安装包"><a href="#NPM安装包" class="headerlink" title="NPM安装包"></a>NPM安装包</h2><ul><li>安装命令行工具一般用全局安装<code>npm install -g <package></code></li><li>安装某个模块到本地<code>npm install webpack</code>，一般用<code>require('webpack')</code>引入</li></ul><h3 id="全局安装"><a href="#全局安装" class="headerlink" title="全局安装"></a>全局安装</h3><ul><li><code>npm install -g 模块名</code></li></ul><h4 id="全局安装权限问题"><a href="#全局安装权限问题" class="headerlink" title="全局安装权限问题"></a>全局安装权限问题</h4><p>全局安装一般都会遇到<code>permission denied</code>的报错，提示没有访问权限<br><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Jietu20180331-225153.png" alt="" title=""> </div> <div class="image-caption"></div> </figure></p><h5 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h5><ul><li><code>sudo npm install -g <package></code>，以管理员身份运行</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">> sudo npm install -g webpack-cli</span><br></pre></td></tr></table></figure><ul><li><code>sudo chown -R npm所在目录/{lib/node_modules,bin,share}</code></li></ul><p>官方推荐的做法，chown全称为change owner，即将npm目录的所有者指定为你的名字（授予权限），-R表示对指定目录下所有的子目录和文件也都采取同种操作。</p><blockquote><p>通过<code>npm config get prefix</code>获取所在目录的路径</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm config get prefix</span><br><span class="line">/usr/<span class="built_in">local</span></span><br><span class="line">➜ ~ sudo chown -R youcanping /usr/<span class="built_in">local</span>/{lib/node_modules,bin,share}</span><br><span class="line">Password:</span><br><span class="line">➜ ~ npm install -g webpack-cli</span><br></pre></td></tr></table></figure><h2 id="本地安装"><a href="#本地安装" class="headerlink" title="本地安装"></a>本地安装</h2><h3 id="安装生产环境依赖包"><a href="#安装生产环境依赖包" class="headerlink" title="安装生产环境依赖包"></a>安装生产环境依赖包</h3><blockquote><p><code>npm install --save <package></code></p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm install --save loadsh</span><br></pre></td></tr></table></figure><h3 id="安装开发环境依赖包"><a href="#安装开发环境依赖包" class="headerlink" title="安装开发环境依赖包"></a>安装开发环境依赖包</h3><blockquote><p><code>npm install --save-dev <package></code>或<code>npm install -D <package></code></p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm install --save-dev webpack</span><br></pre></td></tr></table></figure><ul><li>示例</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"devDependencies"</span>: {</span><br><span class="line"> <span class="attr">"babel-core"</span>: <span class="string">"^6.26.0"</span>,</span><br><span class="line"> <span class="attr">"babel-loader"</span>: <span class="string">"^7.1.4"</span>,</span><br><span class="line"> <span class="attr">"babel-plugin-transform-runtime"</span>: <span class="string">"^6.23.0"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="NPM卸载包"><a href="#NPM卸载包" class="headerlink" title="NPM卸载包"></a>NPM卸载包</h2><h3 id="卸载全局包"><a href="#卸载全局包" class="headerlink" title="卸载全局包"></a>卸载全局包</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall -g <package></span><br></pre></td></tr></table></figure><h3 id="删除本地包"><a href="#删除本地包" class="headerlink" title="删除本地包"></a>删除本地包</h3><p>npm uninstall <package></package></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">删除本地模块时你应该思考的问题：是否将在package.json上的相应依赖信息也消除？</span><br><span class="line">npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息</span><br><span class="line">npm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息</span><br><span class="line">npm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息</span><br></pre></td></tr></table></figure><h2 id="利用NPM发布包"><a href="#利用NPM发布包" class="headerlink" title="利用NPM发布包"></a>利用NPM发布包</h2><blockquote><p>如果<code>NPM</code>设置的淘宝源需要修改回来，具体操作看我上一篇博文</p></blockquote><h3 id="添加用户"><a href="#添加用户" class="headerlink" title="添加用户"></a>添加用户</h3><blockquote><p>添加用户名，输入密码和邮箱</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">~ npm adduser</span><br></pre></td></tr></table></figure><h3 id="登录"><a href="#登录" class="headerlink" title="登录"></a>登录</h3><blockquote><p>已经添加过用户的，下次发布需要登录下</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">~ npm login</span><br></pre></td></tr></table></figure><h3 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</h3><ul><li>包的名称和版本就是你项目里package.json里的name和version</li><li>包的名称不能和NPM已有的包重名</li><li>包名不能有大写字母/空格/下滑线</li><li>publish之前要查看package.json文件里的main指定的路径，一定要写成dist/xxx.js或者dist/xxx.min.js，否则会报找不到依赖的错误</li><li>记得在package.json中更新我们的版本号，如果版本号相同的话会发布失败。</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">~ npm publish</span><br></pre></td></tr></table></figure><h3 id="npm的版本控制"><a href="#npm的版本控制" class="headerlink" title="npm的版本控制"></a>npm的版本控制</h3><h4 id="对于”version”-”x-y-z”"><a href="#对于”version”-”x-y-z”" class="headerlink" title="对于”version”:”x.y.z”"></a>对于”version”:”x.y.z”</h4><ol><li>修复bug,小改动，增加z</li><li>增加了新特性，但仍能向后兼容，增加y</li><li>有很大的改动，无法向后兼容,增加x</li></ol><h4 id="自动改变版本"><a href="#自动改变版本" class="headerlink" title="自动改变版本"></a>自动改变版本</h4><blockquote><p>通过npm version <update_type>, update_type为patch, minor, or major其中之一，分别表示补丁，小改，大改</update_type></p></blockquote><ul><li><code>major</code>对应的<code>X</code>，标识大改</li><li><code>minor</code>对应的<code>Y</code>，标识小改</li><li><code>patch</code>对应的<code>Z</code>，标识补丁</li></ul><blockquote><p>注意更新版本的时候，git工作区得先提交干净才允许提交</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">~ npm version patch</span><br><span class="line">+ [email protected]</span><br></pre></td></tr></table></figure><h4 id="NPM撤销发布的package"><a href="#NPM撤销发布的package" class="headerlink" title="NPM撤销发布的package"></a>NPM撤销发布的<code>package</code></h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">~ npm unpublish ycpy --force</span><br><span class="line"> npm WARN using --force I sure hope you know what you are doing.</span><br><span class="line"> - ycpy</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="NPM安装包"><a href="#NPM安装包" class="headerlink" title="NPM安装包"></a>NPM安装包</h2><ul>
<li>安装命令行工具一般用全局安装<code>npm install -g &lt;package&g
</summary>
<category term="NPM" scheme="https://youcanping.coding.me/categories/NPM/"/>
<category term="npm包管理" scheme="https://youcanping.coding.me/tags/npm%E5%8C%85%E7%AE%A1%E7%90%86/"/>
</entry>
<entry>
<title>如何优雅的切换NPM源</title>
<link href="https://youcanping.coding.me/2018/03/30/npm-change-registry/"/>
<id>https://youcanping.coding.me/2018/03/30/npm-change-registry/</id>
<published>2018-03-30T13:59:57.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="NPM使用淘宝镜像"><a href="#NPM使用淘宝镜像" class="headerlink" title="NPM使用淘宝镜像"></a>NPM使用淘宝镜像</h2><p>我们在实际项目开发中难免会用到NPM，但由于国内网络访问国外NPM很慢，有的还存在下载失败的问题，这个时候很多人都会使用国内淘宝镜像，也就是淘宝源，但是使用淘宝源有个问题就是，当我们要在NPM发布库时，是需要切到国外的NPM源的。</p><h2 id="设置淘宝源步骤"><a href="#设置淘宝源步骤" class="headerlink" title="设置淘宝源步骤"></a>设置淘宝源步骤</h2><h3 id="临时使用"><a href="#临时使用" class="headerlink" title="临时使用"></a>临时使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm --registry https://registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure><h3 id="持久使用"><a href="#持久使用" class="headerlink" title="持久使用"></a>持久使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure><ul><li>验证是否配置成功</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm config get registry</span><br><span class="line">https://registry.npm.taobao.org/</span><br></pre></td></tr></table></figure><h3 id="通过cnpm使用"><a href="#通过cnpm使用" class="headerlink" title="通过cnpm使用"></a>通过cnpm使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure><ul><li>使用</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ cnpm install express</span><br></pre></td></tr></table></figure><h2 id="手动删除淘宝源"><a href="#手动删除淘宝源" class="headerlink" title="手动删除淘宝源"></a>手动删除淘宝源</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm config delete registry</span><br></pre></td></tr></table></figure><h2 id="使用nrm管理源"><a href="#使用nrm管理源" class="headerlink" title="使用nrm管理源"></a>使用nrm管理源</h2><ul><li><a href="https://www.npmjs.com/package/nrm" target="_blank" rel="noopener">https://www.npmjs.com/package/nrm</a><h3 id="安装nrm，MAC机器要加上sudo"><a href="#安装nrm，MAC机器要加上sudo" class="headerlink" title="安装nrm，MAC机器要加上sudo"></a>安装nrm，MAC机器要加上sudo</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ npm install -g nrm</span><br></pre></td></tr></table></figure></li></ul><h3 id="查看源列表"><a href="#查看源列表" class="headerlink" title="查看源列表"></a>查看源列表</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ nrm ls</span><br><span class="line"></span><br><span class="line"> npm ---- https://registry.npmjs.org/</span><br><span class="line"> cnpm --- http://r.cnpmjs.org/</span><br><span class="line">* taobao - https://registry.npm.taobao.org/</span><br><span class="line"> nj ----- https://registry.nodejitsu.com/</span><br><span class="line"> rednpm - http://registry.mirror.cqupt.edu.cn/</span><br><span class="line"> npmMirror https://skimdb.npmjs.com/registry/</span><br><span class="line"> edunpm - http://registry.enpmjs.org/</span><br></pre></td></tr></table></figure><h3 id="切换源"><a href="#切换源" class="headerlink" title="切换源"></a>切换源</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">➜ ~ nrm use npm</span><br><span class="line"> verb config Skipping project config: /Users/youcanping</span><br><span class="line"></span><br><span class="line"> Registry has been <span class="built_in">set</span> to: https://registry.npmjs.org/</span><br><span class="line"></span><br><span class="line">➜ ~ nrm ls</span><br><span class="line"></span><br><span class="line">* npm ---- https://registry.npmjs.org/</span><br><span class="line"> cnpm --- http://r.cnpmjs.org/</span><br><span class="line"> taobao - https://registry.npm.taobao.org/</span><br><span class="line"> nj ----- https://registry.nodejitsu.com/</span><br><span class="line"> rednpm - http://registry.mirror.cqupt.edu.cn/</span><br><span class="line"> npmMirror https://skimdb.npmjs.com/registry/</span><br><span class="line"> edunpm - http://registry.enpmjs.org/</span><br></pre></td></tr></table></figure><h3 id="帮助说明"><a href="#帮助说明" class="headerlink" title="帮助说明"></a>帮助说明</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">~ nrm -h</span><br><span class="line"></span><br><span class="line"> Usage: nrm [options] [<span class="built_in">command</span>]</span><br><span class="line"></span><br><span class="line"> Options:</span><br><span class="line"></span><br><span class="line"> -V, --version 输出版本号</span><br><span class="line"> -h, --<span class="built_in">help</span> 输出使用信息</span><br><span class="line"></span><br><span class="line"> Commands:</span><br><span class="line"></span><br><span class="line"> ls 列出所有源列表</span><br><span class="line"> current 显示当前源名称</span><br><span class="line"> use <registry> 切换源</span><br><span class="line"> add <registry> <url> [home] 添加一个自定义源</span><br><span class="line"> del <registry> 删除一个自定义源</span><br><span class="line"> home <registry> [browser] 使用可选浏览器打开源主页</span><br><span class="line"> <span class="built_in">test</span> [registry] 显示特定或所有源管理机构的响应时间</span><br><span class="line"> <span class="built_in">help</span> 打印此帮助</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="NPM使用淘宝镜像"><a href="#NPM使用淘宝镜像" class="headerlink" title="NPM使用淘宝镜像"></a>NPM使用淘宝镜像</h2><p>我们在实际项目开发中难免会用到NPM，但由于国内网络访问国外NPM很慢，有的还存在下
</summary>
<category term="NPM" scheme="https://youcanping.coding.me/categories/NPM/"/>
<category term="npm切换源" scheme="https://youcanping.coding.me/tags/npm%E5%88%87%E6%8D%A2%E6%BA%90/"/>
</entry>
<entry>
<title>CSS居中布局</title>
<link href="https://youcanping.coding.me/2018/03/11/CSS%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80/"/>
<id>https://youcanping.coding.me/2018/03/11/CSS居中布局/</id>
<published>2018-03-11T20:47:49.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html">< --></p><h3 id="水平居中布局"><a href="#水平居中布局" class="headerlink" title="水平居中布局"></a>水平居中布局</h3><p>水平居中在线演示地址<a href="https://youcanping.github.io/github-demo/align-layout/h-align-center/index.html" target="_blank" rel="noopener">DEMO</a></p><h4 id="行内元素水平居中"><a href="#行内元素水平居中" class="headerlink" title="行内元素水平居中"></a>行内元素水平居中</h4><p>使用<code>text-align: center;</code>进行行内元素、文字水平居中。</p><h4 id="块元素水平居中"><a href="#块元素水平居中" class="headerlink" title="块元素水平居中"></a>块元素水平居中</h4><p>使用<code>text-align: center;</code>和<code>margin:0 auto</code>;进行块元素水平居中。<br>低版本浏览器还需要设置<code>text-align: center</code>;</p><ul><li>优点：兼容性好，可以兼容<code>IE6</code>和<code>IE7</code>。</li><li>缺点：子元素里的内容也会水平居中，需要在子元素中覆盖<code>text-align</code>属性。</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 块元素 div</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用display-table实现水平居中布局"><a href="#使用display-table实现水平居中布局" class="headerlink" title="使用display:table实现水平居中布局"></a>使用<code>display:table</code>实现水平居中布局</h4><p>原理：给子元素设置属性<code>display:table;</code>和<code>margin:0 auto</code>实现子元素水平居中对齐。<br>优点：可以只设置子元素，实现水平居中对齐。<br>缺点：IE6,IE7不支持，IE8以上都支持<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"><span class="attribute">display</span>: table;</span><br><span class="line"><span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用absolute-transform"><a href="#使用absolute-transform" class="headerlink" title="使用absolute+transform"></a>使用absolute+transform</h4><p>适用场景：移动端<br>原理：父容器设置相对定位，子容器设置绝对定位，子容器距离左边50%，然后用CSS3的transform的向左移动自身一半的距离。<br>优点：居中元素不会对其他元素产生影响<br>缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> absolute+transform</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-50%);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="使用flex-justify-content"><a href="#使用flex-justify-content" class="headerlink" title="使用flex + justify-content"></a>使用flex + justify-content</h4><p>适用场景：移动端<br>原理：将父框设置为display:flex，再设置justify-content:center使子元素水平居中<br>优点：只设置父元素即可<br>缺点：低版本浏览器(ie6 ie7 ie8)不支持<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.parent-flex</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent-flex"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> flex + justify-content</span><br><span class="line"> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="水平垂直居中"><a href="#水平垂直居中" class="headerlink" title="水平垂直居中"></a>水平垂直居中</h3><h4 id="使用display-table-cell-和vertical-align-middle-进行垂直居中"><a href="#使用display-table-cell-和vertical-align-middle-进行垂直居中" class="headerlink" title="使用display: table-cell;和vertical-align: middle;进行垂直居中"></a>使用<code>display: table-cell;</code>和<code>vertical-align: middle;</code>进行垂直居中</h4><p>原理：把父容器变成table,然后使用垂直居中属性把子元素居中。<br>优点：兼容性较好，IE8以上都支持。<br>缺点：嵌套太多，父容器不能单独设置宽高属性100%，需要制定具体的值，如果要实现百分比宽高，还需要把父容器放到<code>display:table;</code>的容器里才行。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.table</span>{</span><br><span class="line"> <span class="attribute">display</span>: table;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">display</span>: table-cell;</span><br><span class="line"> <span class="comment">/*垂直居中*/</span></span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line"> <span class="comment">/*水平居中*/</span></span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"table"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> &nbsp;</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用绝对定位和设置外边距"><a href="#使用绝对定位和设置外边距" class="headerlink" title="使用绝对定位和设置外边距"></a>使用绝对定位和设置外边距</h4><p>原理：父容器设置为相对定位，子元素绝对定位<code>top:50%;left:50%;</code>，然后设置自身的外边距为自身宽度的一半<br>优点：兼容性好<br>缺点：需要提前知道子容器的宽高<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">margin-left</span>: -<span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: -<span class="number">50px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="绝对定位-margin-auto"><a href="#绝对定位-margin-auto" class="headerlink" title="绝对定位 + margin: auto"></a>绝对定位 + margin: auto</h4><p>出自<a href="http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/" target="_blank" rel="noopener">小tip: margin:auto实现绝对定位元素的水平垂直居中</a><br>原理：子容器绝对定位，上下左右都为0，外边距<code>margin:auto;</code><br>优点：兼容性好，可以不用提前知道子容器的宽高<br>缺点：暂时没发现<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>:auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用absolute-transform实现水平垂直居中"><a href="#使用absolute-transform实现水平垂直居中" class="headerlink" title="使用absolute+transform实现水平垂直居中"></a>使用absolute+transform实现水平垂直居中</h4><p>适用场景：移动端<br>原理：使用CSS3<code>transform</code>移动自身的一半<br>优点：不用提前知道子容器的宽高，不影响其他元素的布局<br>缺点：兼容性不好<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(-50%,-50%);</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">60%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">60%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="适用flex-align-items布局"><a href="#适用flex-align-items布局" class="headerlink" title="适用flex+align-items布局"></a>适用flex+align-items布局</h4><p>优点：只设置父容器即可<br>缺点：兼容性不好<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="comment">/*垂直居中*/</span></span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="comment">/*水平居中*/</span></span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用伪元素实现水平垂直居中"><a href="#使用伪元素实现水平垂直居中" class="headerlink" title="使用伪元素实现水平垂直居中"></a>使用伪元素实现水平垂直居中</h4><p>原理：不是很清楚<br>出自：<a href="http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/" target="_blank" rel="noopener">:after伪类+content内容生成经典应用举例</a><br>优点：兼容性好<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="comment">/*水平居中*/</span></span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.parent</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用flex-align-items-justify-content实现水平垂直"><a href="#使用flex-align-items-justify-content实现水平垂直" class="headerlink" title="使用flex+align-items+justify-content实现水平垂直"></a>使用flex+align-items+justify-content实现水平垂直</h4><p>优点：可以只修改父容器的<code>align-items</code>属性，实现子元素垂直方向的左中右居中<br>缺点：兼容性不好<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="comment">/*垂直居中*/</span></span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="comment">/*水平居中*/</span></span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="使用padding-calc-实现"><a href="#使用padding-calc-实现" class="headerlink" title="使用padding+calc()实现"></a>使用padding+calc()实现</h4><p>缺点：兼容性不好<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border-width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="built_in">-webkit-calc</span>((100% - 100px)/<span class="number">2</span>);</span><br><span class="line"> <span class="attribute">padding</span>: <span class="built_in">-moz-calc</span>((100% - 100px)/<span class="number">2</span>);</span><br><span class="line"> <span class="attribute">padding</span>: <span class="built_in">calc</span>((100%- 100px)/<span class="number">2</span>);</span><br><span class="line"> <span class="attribute">background-clip</span>: content-box;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> child</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>网上查阅了关于CSS居中布局的方案，决定自己亲自验证下，不能只是体验在理论层面上，做下总结。<br><!-- 源码地址：[GITHUB](https://youcanping.github.io/github-demo/tree/master/align-layout) -
</summary>
<category term="CSS" scheme="https://youcanping.coding.me/categories/CSS/"/>
<category term="CSS" scheme="https://youcanping.coding.me/tags/CSS/"/>
</entry>
<entry>
<title>SSL_ERROR_SYSCALL in connection to github.com:443</title>
<link href="https://youcanping.coding.me/2018/03/01/SSL-ERROR-SYSCALL-github-com-443/"/>
<id>https://youcanping.coding.me/2018/03/01/SSL-ERROR-SYSCALL-github-com-443/</id>
<published>2018-03-01T16:43:39.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h1 id="LibreSSL-SSL-connect-SSL-ERROR-SYSCALL-in-connection-to-github-com-443"><a href="#LibreSSL-SSL-connect-SSL-ERROR-SYSCALL-in-connection-to-github-com-443" class="headerlink" title="LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443"></a>LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443</h1><h2 id="在clone或者push远程仓库报错"><a href="#在clone或者push远程仓库报错" class="headerlink" title="在clone或者push远程仓库报错"></a>在clone或者push远程仓库报错</h2><p>报错信息如下：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Error: fatal: unable to access <span class="string">'https://github.com/xxx/xxx.github.io.git/'</span>: LibreSSL SSL_connect: SSL_ERROR_SYSCALL <span class="keyword">in</span> connection to github.com:443</span><br><span class="line"></span><br><span class="line"> at ChildProcess.<anonymous> (/Users/xxx/workspace/MyBlog/node_modules/hexo-util/lib/spawn.js:37:17)</span><br><span class="line"> at emitTwo (events.js:125:13)</span><br><span class="line"> at ChildProcess.emit (events.js:213:7)</span><br><span class="line"> at maybeClose (internal/child_process.js:927:16)</span><br><span class="line"> at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)</span><br></pre></td></tr></table></figure></p><h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><ul><li>把仓库链接地址由https修改为ssl的地址</li></ul>]]></content>
<summary type="html">
<h1 id="LibreSSL-SSL-connect-SSL-ERROR-SYSCALL-in-connection-to-github-com-443"><a href="#LibreSSL-SSL-connect-SSL-ERROR-SYSCALL-in-connecti
</summary>
<category term="GIT" scheme="https://youcanping.coding.me/categories/GIT/"/>
<category term="git" scheme="https://youcanping.coding.me/tags/git/"/>
<category term="GitHub" scheme="https://youcanping.coding.me/tags/GitHub/"/>
</entry>
<entry>
<title>JS-Calculate-Bug</title>
<link href="https://youcanping.coding.me/2018/01/18/JS-Calculate-Bug/"/>
<id>https://youcanping.coding.me/2018/01/18/JS-Calculate-Bug/</id>
<published>2018-01-18T11:11:23.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<blockquote><p>我们在做JS浮点数计算的时候回出现各种奇怪的现象，出现精度问题，不是JS的问题，所有语言都有这个问题。</p></blockquote><p>如<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">> 1.43 + 1.00 => 2.4299999999999997</span><br><span class="line">> 2.2 - 1.9 => 0.30000000000000027</span><br><span class="line">> 2.2 * 2.2 => 4.840000000000001</span><br><span class="line">> 2.1 / 0.3 => 7.000000000000001</span><br></pre></td></tr></table></figure></p><blockquote><p>遇到这种问题，网上已有解决方案，既然js对小数的计算有问题，思路就是先转成整数计算，计算后再转成小数。</p><ul><li><a href="http://www.css88.com/archives/7340#more-7340" target="_blank" rel="noopener">JavaScript 浮点数运算的精度问题</a></li><li><a href="https://segmentfault.com/q/1010000000670650" target="_blank" rel="noopener">js小数计算如何保证得到正确的值？</a></li><li><a href="http://www.jb51.net/article/75801.htm" target="_blank" rel="noopener">解决JavaScript数字精度丢失问题的方法</a></li></ul><p>对于金融类的推荐使用下面类库解决JS精度问题</p><ul><li><a href="https://github.com/josdejong/mathjs" target="_blank" rel="noopener">https://github.com/josdejong/mathjs</a></li><li><a href="http://www.css88.com/archives/7324" target="_blank" rel="noopener">JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去…</a></li></ul></blockquote>]]></content>
<summary type="html">
<blockquote>
<p>我们在做JS浮点数计算的时候回出现各种奇怪的现象，出现精度问题，不是JS的问题，所有语言都有这个问题。</p>
</blockquote>
<p>如<br><figure class="highlight bash"><table><tr><td
</summary>
<category term="JavaScript" scheme="https://youcanping.coding.me/categories/JavaScript/"/>
<category term="js浮点数计算" scheme="https://youcanping.coding.me/tags/js%E6%B5%AE%E7%82%B9%E6%95%B0%E8%AE%A1%E7%AE%97/"/>
<category term="js小数计算" scheme="https://youcanping.coding.me/tags/js%E5%B0%8F%E6%95%B0%E8%AE%A1%E7%AE%97/"/>
</entry>
<entry>
<title>webpack使用jQuery的解决方式</title>
<link href="https://youcanping.coding.me/2018/01/15/webpack-externals-jQuery/"/>
<id>https://youcanping.coding.me/2018/01/15/webpack-externals-jQuery/</id>
<published>2018-01-15T14:32:34.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="webpack引入jquery报错"><a href="#webpack引入jquery报错" class="headerlink" title="webpack引入jquery报错"></a>webpack引入jquery报错</h2><p>jQuery作为老牌的web前端利器已经好多年，虽然有很多人说jQuery性能低等，出现了很多替代品，但不可否认，对开发轻量级别的应用来说还是很好用，jQuery插件丰富，还是很令人割舍不下的。<br>最近项目引入了webpack打包工具，由于用到了jQuery和jQuery的一些插件，如果jquery.js用webpack构建，插件会因为找不到而报错。 </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">ERROR <span class="keyword">in</span> ./src/pages/common/support/js/jquery.mobile-1.4.5.js</span><br><span class="line">Module not found: Error: Can<span class="string">'t resolve '</span>jquery<span class="string">' in '</span>C:\Users\Administrator\Desktop\web_online\src\pages\common\support\js<span class="string">'</span></span><br><span class="line"><span class="string"> @ ./src/pages/common/support/js/jquery.mobile-1.4.5.js 18:2-21:4</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">ERROR in ./src/pages/common/support/js/jquery.touchSwipe.js</span></span><br><span class="line"><span class="string">Module not found: Error: Can'</span>t resolve <span class="string">'jquery'</span> <span class="keyword">in</span> <span class="string">'C:\Users\Administrator\Desktop\web_online\src\pages\common\support\js'</span></span><br><span class="line"> @ ./src/pages/common/support/js/jquery.touchSwipe.js 154:4-31 157:12-29</span><br></pre></td></tr></table></figure><h2 id="我的解决方式"><a href="#我的解决方式" class="headerlink" title="我的解决方式"></a>我的解决方式</h2><ol><li>HTML页面直接引入jQuery,考虑jQuery这种库不会经常改的，页面缓存也无所谓，缓存更好，用到的三方库也用HTML引入的方式。</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../common/support/js/jquery-1.8.2.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../common/support/js/jquery.mobile-1.4.5.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><ol><li>使用CopyWebpackPlugin插件,把第三方支持库直接拷贝到<code>dist/</code>目录下，绕过webpack打包构建，直接复制的目标文件夹下，注意jQuery在<code>src/</code>和<code>dist/</code>下的目录结构保持一致。</li><li>在webpack.config.js中进行配置externals，告诉webpack下jquery不需要打包了，不然会报错。</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">externals:{</span><br><span class="line"> jquery:<span class="string">"window.$"</span>,</span><br><span class="line"> $:<span class="string">"window.$"</span></span><br><span class="line">},</span><br><span class="line">plugins:[</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="webpack引入jquery报错"><a href="#webpack引入jquery报错" class="headerlink" title="webpack引入jquery报错"></a>webpack引入jquery报错</h2><p>jQuery作为老牌
</summary>
<category term="webpack" scheme="https://youcanping.coding.me/categories/webpack/"/>
<category term="webpack" scheme="https://youcanping.coding.me/tags/webpack/"/>
<category term="jQuery" scheme="https://youcanping.coding.me/tags/jQuery/"/>
</entry>
<entry>
<title>解决iframe嵌入页面在iOS不能滚动问题</title>
<link href="https://youcanping.coding.me/2017/12/28/iframe-scroll-in-ios/"/>
<id>https://youcanping.coding.me/2017/12/28/iframe-scroll-in-ios/</id>
<published>2017-12-28T15:06:05.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h2 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h2><p>最近在写移动端模块页面，需要嵌入三方的页面，该页面有上拉加载更多的功能，但是使用iframe嵌入到我的web app中出现了不能滚动的问题。<br>网上查询解决方式一直找不到很好的方式，无意中看到了一篇博客解决了我的燃眉之急，用很巧妙的方式化解了这个问题。<br>原文链接 <a href="https://davidwalsh.name/scroll-iframes-ios" target="_blank" rel="noopener">scroll-iframes-ios</a></p><h2 id="解决方式"><a href="#解决方式" class="headerlink" title="解决方式"></a>解决方式</h2><h3 id="在iframe外面包裹一个div。"><a href="#在iframe外面包裹一个div。" class="headerlink" title="在iframe外面包裹一个div。"></a>在iframe外面包裹一个div。</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"scroll-wrapper"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="给该div添加css触屏滚动属性。"><a href="#给该div添加css触屏滚动属性。" class="headerlink" title="给该div添加css触屏滚动属性。"></a>给该div添加css触屏滚动属性。</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.scroll-wrapper</span> {</span><br><span class="line"><span class="attribute">-webkit-overflow-scrolling</span>: touch;</span><br><span class="line"> <span class="attribute">overflow-y</span>: scroll;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 在这里设置外层div的大小和定位样式 */</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.scroll-wrapper</span> <span class="selector-tag">iframe</span> {</span><br><span class="line"><span class="comment">/* 设置iframe的样式 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="我的页面需要全屏显示嵌入的页面，添加如下样式。"><a href="#我的页面需要全屏显示嵌入的页面，添加如下样式。" class="headerlink" title="我的页面需要全屏显示嵌入的页面，添加如下样式。"></a>我的页面需要全屏显示嵌入的页面，添加如下样式。</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.scroll-wrapper</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">-webkit-overflow-scrolling</span>: touch;</span><br><span class="line"> <span class="attribute">overflow-y</span>: scroll;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.scroll-wrapper</span> <span class="selector-tag">iframe</span> {</span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h2><p>最近在写移动端模块页面，需要嵌入三方的页面，该页面有上拉加载更多的功能，但是使用iframe嵌入到我的web app中出现了
</summary>
<category term="HTML5" scheme="https://youcanping.coding.me/categories/HTML5/"/>
<category term="iframe" scheme="https://youcanping.coding.me/tags/iframe/"/>
<category term="HTML" scheme="https://youcanping.coding.me/tags/HTML/"/>
</entry>
<entry>
<title>js变量空值校验</title>
<link href="https://youcanping.coding.me/2017/12/20/js%E5%8F%98%E9%87%8F%E5%AE%89%E5%85%A8%E6%A0%A1%E9%AA%8C/"/>
<id>https://youcanping.coding.me/2017/12/20/js变量安全校验/</id>
<published>2017-12-20T16:53:16.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h3 id="js判断变量空值的方法有"><a href="#js判断变量空值的方法有" class="headerlink" title="js判断变量空值的方法有"></a>js判断变量空值的方法有</h3><h4 id="使用表达式"><a href="#使用表达式" class="headerlink" title="使用表达式"></a>使用表达式</h4><ul><li>使用表达式空值判断有个弊端就是，如果改变量没有声明，则页面报错。<figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Snip20171221_17.png" alt="" title=""> </div> <div class="image-caption"></div> </figure></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(!a){</span><br><span class="line"> <span class="comment">//如果a不为空 ...</span></span><br><span class="line">}<span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 如果a为空 ...</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="keyword">var</span> temp = a||<span class="string">"默认值"</span>;</span><br></pre></td></tr></table></figure><ul><li>用于函数内行参的判断，不会报错<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _a = a || <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> _b = b || <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">return</span> _a + _b;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h3 id="安全的变量校验"><a href="#安全的变量校验" class="headerlink" title="安全的变量校验"></a>安全的变量校验</h3><ul><li>如何对一个未知变量做判断呢，使用typeof判断一个没有声明的变量不会报错，返回’undefined’<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> a === <span class="string">'undefined'</span>){</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Snip20171221_19.png" alt="" title=""> </div> <div class="image-caption"></div> </figure>]]></content>
<summary type="html">
<h3 id="js判断变量空值的方法有"><a href="#js判断变量空值的方法有" class="headerlink" title="js判断变量空值的方法有"></a>js判断变量空值的方法有</h3><h4 id="使用表达式"><a href="#使用表达式" c
</summary>
<category term="JavaScript" scheme="https://youcanping.coding.me/categories/JavaScript/"/>
<category term="js变量校验" scheme="https://youcanping.coding.me/tags/js%E5%8F%98%E9%87%8F%E6%A0%A1%E9%AA%8C/"/>
</entry>
<entry>
<title>ssh Permission denied </title>
<link href="https://youcanping.coding.me/2017/12/20/ssh-Permission-denied/"/>
<id>https://youcanping.coding.me/2017/12/20/ssh-Permission-denied/</id>
<published>2017-12-20T14:27:41.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h3 id="该问题对应的网上解决方式"><a href="#该问题对应的网上解决方式" class="headerlink" title="该问题对应的网上解决方式"></a>该问题对应的网上解决方式</h3><ul><li><a href="https://segmentfault.com/q/1010000003061640/a-1020000012587308" target="_blank" rel="noopener">segmentfault对应的该问题回答</a></li><li><a href="https://stackoverflow.com/questions/12940626/github-error-message-permission-denied-publickey" target="_blank" rel="noopener">stackoverflow对该问题的回调</a></li></ul><h3 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h3><p>换电脑使用hexo发布博客，hexo源码是备份到github上的，clone到本地 hexo g 生成博客没有报错，hexo d发布博客出问题了，报出如下错误。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">> sudo hexo d</span><br><span class="line">Permission denied (publickey).</span><br><span class="line">fatal: Could not <span class="built_in">read</span> from remote repository.</span><br><span class="line"></span><br><span class="line">Please make sure you have the correct access rights</span><br><span class="line">and the repository exists.</span><br><span class="line">FATAL Something<span class="string">'s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html</span></span><br><span class="line"><span class="string">Error: Permission denied (publickey).</span></span><br><span class="line"><span class="string">fatal: Could not read from remote repository.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">Please make sure you have the correct access rights</span></span><br><span class="line"><span class="string">and the repository exists.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> at ChildProcess.<anonymous> (/Users/youcanping/Desktop/MyBlog/node_modules/hexo-util/lib/spawn.js:37:17)</span></span><br><span class="line"><span class="string"> at emitTwo (events.js:125:13)</span></span><br><span class="line"><span class="string"> at ChildProcess.emit (events.js:213:7)</span></span><br><span class="line"><span class="string"> at maybeClose (internal/child_process.js:927:16)</span></span><br><span class="line"><span class="string"> at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)</span></span><br></pre></td></tr></table></figure><h3 id="解决方式"><a href="#解决方式" class="headerlink" title="解决方式"></a>解决方式</h3><ol><li><p>先看本地是否有ssh文件</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">> <span class="built_in">cd</span> ~/.ssh</span><br><span class="line">> ls</span><br><span class="line">id_rsa id_rsa.pub known_hosts</span><br></pre></td></tr></table></figure></li><li><p>有则把公钥加到github</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">>cat id_rsa.pub</span><br><span class="line">ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDVRgHi3gPdBcQ... [email protected]</span><br></pre></td></tr></table></figure></li><li><p>github 添加公钥示意图</p><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Snip20171220_3.png" alt="" title=""> </div> <div class="image-caption"></div> </figure><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Snip20171220_4.png" alt="" title=""> </div> <div class="image-caption"></div> </figure><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/Snip20171220_5.png" alt="" title=""> </div> <div class="image-caption"></div> </figure></li><li><p>如果以上操作问题还不能解决,并且执行 ssh -T [email protected] 出现如下提示，说明本地公钥没有问题，则看第5步</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">> ssh -T [email protected]</span><br><span class="line">Hi youcanping! You<span class="string">'ve successfully authenticated, but GitHub does not provide shell access.</span></span><br></pre></td></tr></table></figure></li><li><p>看本地的.git/config设置的仓库url地址和github使用的链接地址是否一致如下图,如use https,则url需要用https的仓库地址，我的就是这个问题。</p><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="http://our9i4zgx.bkt.clouddn.com/blog/Snip20171226_12.png" alt="" title=""> </div> <div class="image-caption"></div> </figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">> cat .git/config</span><br><span class="line">[core]</span><br><span class="line"> repositoryformatversion = 0</span><br><span class="line"> filemode = <span class="literal">true</span></span><br><span class="line"> bare = <span class="literal">false</span></span><br><span class="line"> logallrefupdates = <span class="literal">true</span></span><br><span class="line"> ignorecase = <span class="literal">true</span></span><br><span class="line"> precomposeunicode = <span class="literal">true</span></span><br><span class="line">[remote <span class="string">"origin"</span>]</span><br><span class="line"> url = https://github.com/youcanping/MyBlog.git</span><br><span class="line"> fetch = +refs/heads/*:refs/remotes/origin/*</span><br><span class="line">[branch <span class="string">"master"</span>]</span><br><span class="line"> remote = origin</span><br><span class="line"> merge = refs/heads/master</span><br></pre></td></tr></table></figure></li><li><p>把公钥放到系统里[最佳答案]</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">> ssh-add ~/.ssh/id_rsa</span><br><span class="line">> Identity added: /Users/youcanping/.ssh/id_rsa (/Users/youcanping/.ssh/id_rsa)</span><br></pre></td></tr></table></figure></li></ol>]]></content>
<summary type="html">
<h3 id="该问题对应的网上解决方式"><a href="#该问题对应的网上解决方式" class="headerlink" title="该问题对应的网上解决方式"></a>该问题对应的网上解决方式</h3><ul>
<li><a href="https://segment
</summary>
<category term="node" scheme="https://youcanping.coding.me/categories/node/"/>
<category term="hexo" scheme="https://youcanping.coding.me/tags/hexo/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="https://youcanping.coding.me/2017/12/17/hello-world/"/>
<id>https://youcanping.coding.me/2017/12/17/hello-world/</id>
<published>2017-12-17T20:24:15.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i< <span class="number">10</span>; i++) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
<category term="node" scheme="https://youcanping.coding.me/categories/node/"/>
<category term="hexo" scheme="https://youcanping.coding.me/tags/hexo/"/>
</entry>
<entry>
<title>node-gyp error</title>
<link href="https://youcanping.coding.me/2017/12/17/node-gyp-error/"/>
<id>https://youcanping.coding.me/2017/12/17/node-gyp-error/</id>
<published>2017-12-17T20:24:15.000Z</published>
<updated>2018-08-04T06:17:23.016Z</updated>
<content type="html"><![CDATA[<h3 id="报错信息"><a href="#报错信息" class="headerlink" title="报错信息"></a>报错信息</h3><ul><li>今天在安装hexo博客命令行工具是遇到一个问题，报错如下</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">youcanpingdeMacBook-Pro:MyBlog issuser$ sudo npm install hexo-cli -g</span><br><span class="line"></span><br><span class="line">/usr/<span class="built_in">local</span>/bin/hexo -> /usr/<span class="built_in">local</span>/lib/node_modules/hexo-cli/bin/hexo</span><br><span class="line"></span><br><span class="line">> [email protected] install /usr/<span class="built_in">local</span>/lib/node_modules/hexo-cli/node_modules/fsevents</span><br><span class="line">> node install</span><br><span class="line"></span><br><span class="line">node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v59-darwin-x64.tar.gz </span><br><span class="line">node-pre-gyp ERR! Pre-built binaries not found <span class="keyword">for</span> [email protected] and [email protected] (node-v59 ABI, unknown) (falling back to <span class="built_in">source</span> compile with node-gyp) </span><br><span class="line">gyp ERR! clean error </span><br><span class="line">gyp ERR! stack Error: EACCES: permission denied, rmdir <span class="string">'build'</span></span><br><span class="line">gyp ERR! System Darwin 17.2.0</span><br><span class="line">gyp ERR! <span class="built_in">command</span> <span class="string">"/usr/local/bin/node"</span> <span class="string">"/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js"</span> <span class="string">"clean"</span></span><br><span class="line">gyp ERR! cwd /usr/<span class="built_in">local</span>/lib/node_modules/hexo-cli/node_modules/fsevents</span><br><span class="line">gyp ERR! node -v v9.3.0</span><br><span class="line">gyp ERR! node-gyp -v v3.6.2</span><br><span class="line">gyp ERR! not ok </span><br><span class="line">node-pre-gyp ERR! build error </span><br><span class="line">node-pre-gyp ERR! stack Error: Failed to execute <span class="string">'/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js clean'</span> (1)</span><br><span class="line">node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/usr/<span class="built_in">local</span>/lib/node_modules/hexo-cli/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)</span><br><span class="line">node-pre-gyp ERR! stack at ChildProcess.emit (events.js:159:13)</span><br><span class="line">node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:943:16)</span><br><span class="line">node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)</span><br><span class="line">node-pre-gyp ERR! System Darwin 17.2.0</span><br><span class="line">node-pre-gyp ERR! <span class="built_in">command</span> <span class="string">"/usr/local/bin/node"</span> <span class="string">"/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp"</span> <span class="string">"install"</span> <span class="string">"--fallback-to-build"</span></span><br><span class="line">node-pre-gyp ERR! cwd /usr/<span class="built_in">local</span>/lib/node_modules/hexo-cli/node_modules/fsevents</span><br><span class="line">node-pre-gyp ERR! node -v v9.3.0</span><br><span class="line">node-pre-gyp ERR! node-pre-gyp -v v0.6.39</span><br><span class="line">node-pre-gyp ERR! not ok </span><br><span class="line">Failed to execute <span class="string">'/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js clean'</span> (1)</span><br><span class="line">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/hexo-cli/node_modules/fsevents):</span><br><span class="line">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node install`</span><br><span class="line">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1</span><br></pre></td></tr></table></figure><h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><ul><li>解决方法，单独执行如下命令即可</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install -g node-gyp</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h3 id="报错信息"><a href="#报错信息" class="headerlink" title="报错信息"></a>报错信息</h3><ul>
<li>今天在安装hexo博客命令行工具是遇到一个问题，报错如下</li>
</ul>
<figure class="h
</summary>
<category term="node" scheme="https://youcanping.coding.me/categories/node/"/>
<category term="hexo" scheme="https://youcanping.coding.me/tags/hexo/"/>
</entry>
</feed>