-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
961 lines (934 loc) · 220 KB
/
search.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
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[Mac环境下关闭指定端口进程]]></title>
<url>https://relign.github.io/Linux/unixCloseProcess/</url>
<content type="html"><![CDATA[<blockquote>
<p>一次Webapck打包进度卡在70%,<code>Ctrl+C</code>退出后,重启Webpack发现一直提示端口被占用.</p>
</blockquote>
<h3 id="查看指定端口进程"><a href="#查看指定端口进程" class="headerlink" title="查看指定端口进程"></a>查看指定端口进程</h3><p>查找<code>8001</code>端口被哪个进程占用:<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># lsof -i:8001</span></div></pre></td></tr></table></figure></p>
<p>结果显示<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME</div><div class="line">node 1577 relign 24u IPv4 0xf4c52151f2395907 0t0 TCP *:vcom-tunnel (LISTEN)</div></pre></td></tr></table></figure></p>
<p>我们可以看到一个node进程占用了<code>8001</code>端口.<br>输出各列信息的意义如下:</p>
<ul>
<li><code>COMMAND</code> 进程的名称,也就是启动的程序名</li>
<li><code>PID</code> 进程的ID</li>
<li><code>USER</code> 进程属主的名字</li>
<li><code>FD</code> 文件描述符,应用程序通过文件描述符识别该文件.如<code>CWD</code>,<code>txt</code>等</li>
<li><code>TYPE</code> 文件的类型,如<code>DIR</code>、<code>REG</code>等</li>
<li><code>DEVICE</code> 指定磁盘的名称</li>
<li><code>SIZE</code> 文件的大小</li>
<li><code>NODE</code> 索引节点(文件在磁盘上的标识)</li>
<li><code>NAME</code> 打开文件的确切名称</li>
</ul>
<a id="more"></a>
<h3 id="关闭进程"><a href="#关闭进程" class="headerlink" title="关闭进程"></a>关闭进程</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"># kill -9 1577</div></pre></td></tr></table></figure>
<p>终止一个进程或终止一个正在运行的程序,一般是通过<code>kill</code>、<code>killall</code>、<code>pkill</code>、<code>xkill</code>等进行.比如一个程序已经死掉,但又不能退出,这时就应该考虑应用这些工具.</p>
<h4 id="kill命令"><a href="#kill命令" class="headerlink" title="kill命令"></a>kill命令</h4><p><code>kill</code>命令可通过进程ID(PID)给进程发信号.默认情况下,<code>kill</code>命令会向命令行中列出的全部PID发送一个<br><code>TERM</code>信号.遗憾的是你只能用PID而不能用命令名,所以<code>kill</code>命令有时并不好用.</p>
<p>要发送进程信号,你必须是进程的属主或登录为<code>root</code>用户.<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ kill 1577</div></pre></td></tr></table></figure></p>
<p><code>TERM</code>信号告诉进程可能的话就停止运行.不过,如果有不服管教的进程,那它通常会忽略这个请求.如果要强制终止,可以用<code>kill -9 [PID]</code>.</p>
<h4 id="killall命令"><a href="#killall命令" class="headerlink" title="killall命令"></a>killall命令</h4><p><code>killall</code>通过程序的名字,直接杀死所有进程.</p>
]]></content>
</entry>
<entry>
<title><![CDATA[CORS跨域资源共享总结]]></title>
<url>https://relign.github.io/http/CORSDetail/</url>
<content type="html"><![CDATA[<p>使用<code>XMLHttpRequest</code>对象和<code>Fetch</code>发起HTTP请求就必须遵守<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy" target="_blank" rel="external">同源策略</a>.<br>而CORS就是W3C推出的一个标准,用来解决跨域问题.</p>
<h3 id="CORS"><a href="#CORS" class="headerlink" title="CORS"></a>CORS</h3><p>CORS,全称是”跨域资源共享”(Cross-origin resource sharing).这种方式让Web应用服务器能支持跨站访问控制,从而使得安全地进行跨站数据传输成为可能.</p>
<p>跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源.另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法.在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求.服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据).</p>
<p>浏览器将CORS请求分成两类: 简单请求(simple request) 和非简单请求(not-so-simple request);</p>
<a id="more"></a>
<h3 id="简单请求"><a href="#简单请求" class="headerlink" title="简单请求"></a>简单请求</h3><p>所谓的简单,是指:</p>
<ul>
<li>只使用<code>GET</code>,<code>HEAD</code>或者<code>POST</code>请求方法.如果使用<code>POST</code>向服务器端传送数据,则数据类型(<code>Content-Type</code>)只能是<code>application/x-www-form-urlencoded</code>,<code>multipart/form-data</code>或<code>text/plain</code>中的一种.</li>
<li>不使用自定义请求头(例:<code>X-Requested-With</code>)</li>
</ul>
<blockquote>
<p>这些跨站请求与以往浏览器发出的跨站请求并无异同.并且,如果服务器不给出适当的响应头,则不会有任何数据返回给请求方.因此,那些不允许跨站请求的网站无需为这一新的 HTTP 访问控制特性担心.</p>
</blockquote>
<p>CORS简单请求发起时,会自动在头部信息添加一个<code>Origin</code>字段:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// 请求</div><div class="line">GET /cors HTTP/1.1</div><div class="line">Origin: http://api.qiutc.me</div><div class="line">Host: api.alice.com</div><div class="line">Accept-Language: en-US</div><div class="line">Connection: keep-alive</div><div class="line">User-Agent: Mozilla/5.0...</div></pre></td></tr></table></figure></p>
<p>表示本次请求来自哪个源(协议+域名+端口),服务端会获取到这个值,然后判断是否同意这个请求.</p>
<p>如果服务端允许请求,则会在返回的头信息中多出几个字段:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">// 返回</div><div class="line">Access-Control-Allow-Origin: http://api.qiutc.me</div><div class="line">Access-Control-Allow-Credentials: true</div><div class="line">Access-Control-Expose-Headers: Info</div><div class="line">Content-Type: text/html;charset=utf-8</div></pre></td></tr></table></figure></p>
<p>其中以<code>Access-Control</code>开头的字段就是CORS请求,服务端返回的相关字段:</p>
<ul>
<li><code>Access-Control-Allow-Origin</code><br><code>required</code>.它的值是请求时<code>Origin</code>字段的值或者是<code>*</code>,如果是<code>*</code>,则表示接受任意域名的请求.</li>
<li><p><code>Access-Control-Allow-Credentials</code><br> 可选,它的值是一个布尔值,表示是否允许发送Cookie.默认情况下,Cookie不包括在CORS请求之中.设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器.</p>
<p> 需要发送<code>cookie</code>的时候,还需要注意将<code>XMLHttpRequest</code>的<code>withCredentials</code>标志设置为true,<br> 从而使得Cookies可以随着请求发送:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">xhr.withCredentials = <span class="literal">true</span>;</div></pre></td></tr></table></figure>
<p> <strong>需要注意的是,如果要发送<code>Cookie</code>,<code>Access-Control-Allow-Origin</code>就不能设为<code>*</code>,必须指定明确的、与请求网页一致的域名.同时,<code>Cookie</code>依然遵循同源政策,只有用服务器域名设置的<code>Cookie</code>才会上传,其他域名的<code>Cookie</code>并不会上传,且原网页代码中的<code>document.cookie</code>也无法读取服务器域名下的<code>Cookie</code>.</strong></p>
</li>
<li><p><code>Access-Control-Expose-Headers</code><br> 可选,设置浏览器允许访问的服务器的头信息的白名单.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header</div></pre></td></tr></table></figure>
<p> 这样,<code>X-My-Custom-Header</code> 和 <code>X-Another-Custom-Header</code>这两个头信息,都可以被浏览器得到.</p>
</li>
</ul>
<h3 id="非简单请求"><a href="#非简单请求" class="headerlink" title="非简单请求"></a>非简单请求</h3><p>如果浏览器发送的请求不满足上述的简单请求的条件,那么浏览器在进行CORS跨域资源共享的请求就是非简单请求:</p>
<ul>
<li>请求以 <code>GET</code>, <code>HEAD</code> 或者 <code>POST</code> 以外的方法发起请求.或者,使用 <code>POST</code>，但请求数据为 <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code> 或者 <code>text/plain</code> 以外的数据类型.比如说,用 <code>POST</code> 发送数据类型为 <code>application/xml</code> 或者 <code>text/xml</code> 的 <code>XML</code>数据的请求.</li>
<li>使用自定义请求头(比如添加诸如 <code>X-PINGOTHER</code>)</li>
</ul>
<blockquote>
<p> 从Gecko 2.0开始,<code>text/plain</code>,<code>application/x-www-form-urlencoded</code> 和 <code>multipart/form-data</code>类型的数据都可以直接用于跨站请求,而不需要先发起“预请求”了.之前,只有 <code>text/plain</code> 可以不用先发起“预请求”,进行跨站请求.</p>
</blockquote>
<p>非简单请求,会在正式通信之前,发送一次<code>预请求</code>,即<code>OPTIONS</code>请求,也称为<code>预检请求(preflight)</code>.预请求的目的是浏览器询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段.只有得到肯定答复,浏览器才会发起正式的<code>XMLHttpRequest</code>请求,否则就会报错.</p>
<p>预检请求发送的请求:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">OPTIONS /cors HTTP/1.1</div><div class="line">Origin: http://api.qiutc.me</div><div class="line">Access-Control-Request-Method: PUT</div><div class="line">Access-Control-Request-Headers: X-Custom-Header</div><div class="line">Host: api.qiutc.com</div><div class="line">Accept-Language: en-US</div><div class="line">Connection: keep-alive</div><div class="line">User-Agent: Mozilla/5.0...</div></pre></td></tr></table></figure></p>
<p>预检请求用的请求方法是<code>OPTIONS</code>,表示这个请求是用来询问的.头信息里面,关键字段是<code>Origin</code>,表示请求来自哪个源.<br>除了<code>Origin</code>字段,预检请求的头信息包括两个特殊字段.</p>
<ul>
<li><p><code>Access-Control-Request-Method</code><br>必选字段,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是<code>PUT</code>.</p>
</li>
<li><p><code>Access-Control-Request-Headers</code><br>该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是<code>X-Custom-Header</code>.</p>
</li>
</ul>
<p>预检请求的返回:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">HTTP/1.1 200 OK</div><div class="line">Date: Mon, 01 Dec 2008 01:15:39 GMT</div><div class="line">Server: Apache/2.0.61 (Unix)</div><div class="line">Access-Control-Allow-Origin: http://api.qiutc.me</div><div class="line">Access-Control-Allow-Methods: GET, POST, PUT</div><div class="line">Access-Control-Allow-Headers: X-Custom-Header</div><div class="line">Content-Type: text/html; charset=utf-8</div><div class="line">Content-Encoding: gzip</div><div class="line">Content-Length: 0</div><div class="line">Keep-Alive: timeout=2, max=100</div><div class="line">Connection: Keep-Alive</div><div class="line">Content-Type: text/plain</div></pre></td></tr></table></figure></p>
<ul>
<li><p><code>Access-Control-Allow-Methods</code><br><code>required</code>,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法.注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法.这是为了避免多次”预检”请求.</p>
</li>
<li><p><code>Access-Control-Allow-Headers</code><br>如果浏览器请求包括<code>Access-Control-Request-Headers</code>字段,则<code>Access-Control-Allow-Headers</code>字段是必需的.它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在”预检”中请求的字段.</p>
</li>
<li><p><code>Access-Control-Max-Age</code><br>该字段可选,用来指定本次预检请求的有效期,单位为秒.上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求.</p>
</li>
</ul>
<h3 id="小记"><a href="#小记" class="headerlink" title="小记"></a>小记</h3><p>就兼容性来说,ie10+ 和现代浏览器都是支持的.<br><img src="https://qiutc.me/img/cross-domain-cors.png" alt="'兼容'"><br>CORS与JSONP的使用目的相同,但是比JSONP更强大.<br>JSONP只支持<code>GET</code>请求,CORS支持所有类型的HTTP请求.JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据.</p>
<p>参考资料:</p>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2016/04/cors.html" target="_blank" rel="external">跨域资源共享 CORS 详解</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#" target="_blank" rel="external">HTTP访问控制(CORS)</a></li>
</ul>
]]></content>
</entry>
<entry>
<title><![CDATA[Angular小坑之ngIf和ngModel]]></title>
<url>https://relign.github.io/Angular/ngIfAndngModel/</url>
<content type="html"><![CDATA[<p>Angular项目需求开发中偶遇小坑,发现利用<code>ngModel</code>绑定值后,监测不到值的变化.<br>于是简单写了个demo复现了这种情况:</p>
<iframe height="437" scrolling="no" title="WogMpK" src="//codepen.io/relign/embed/WogMpK/?height=437&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/WogMpK/" target="_blank" rel="external">WogMpK</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>这种情况发生在<code>ng-if</code>中嵌套一个<code>ng-model</code>,<code>ng-model</code>就会无效.</p>
<p>AngularJS中<code>ng-show</code>,<code>ng-hide</code>,<code>ng-if</code>用来控制DOM元素的显示和隐藏,<br>不同的是<code>ng-show</code>和<code>ng-hide</code>是通过计算表达式的值来控制增加还是删除DOM元素的类名(<code>ng-hide</code>),详细见源码:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// ngHide</span></div><div class="line"><span class="keyword">var</span> ngHideDirective = [<span class="string">'$animate'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$animate</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">scope, element, attr</span>) </span>{</div><div class="line"> scope.$watch(attr.ngHide, <span class="function"><span class="keyword">function</span> <span class="title">ngHideWatchAction</span>(<span class="params">value</span>)</span>{</div><div class="line"> $animate[toBoolean(value) ? <span class="string">'addClass'</span> : <span class="string">'removeClass'</span>](element, <span class="string">'ng-hide'</span>);</div><div class="line"> });</div><div class="line"> };</div><div class="line">}];</div><div class="line"><span class="comment">// ngShow</span></div><div class="line"><span class="keyword">var</span> ngShowDirective = [<span class="string">'$animate'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$animate</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">scope, element, attr</span>) </span>{</div><div class="line"> scope.$watch(attr.ngShow, <span class="function"><span class="keyword">function</span> <span class="title">ngShowWatchAction</span>(<span class="params">value</span>)</span>{</div><div class="line"> $animate[toBoolean(value) ? <span class="string">'removeClass'</span> : <span class="string">'addClass'</span>](element, <span class="string">'ng-hide'</span>);</div><div class="line"> });</div><div class="line"> };</div><div class="line">}];</div></pre></td></tr></table></figure></p>
<p><code>ng-hide</code>类名是控制CSS的<code>display</code>属性值.</p>
<a id="more"></a>
<p>然而,<code>ng-if</code>指令是根据表达式的值增加或者移除一个DOM元素:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> ngIfDirective = [<span class="string">'$animate'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$animate</span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">transclude</span>: <span class="string">'element'</span>,</div><div class="line"> <span class="attr">priority</span>: <span class="number">600</span>,</div><div class="line"> <span class="attr">terminal</span>: <span class="literal">true</span>,</div><div class="line"> <span class="attr">restrict</span>: <span class="string">'A'</span>,</div><div class="line"> <span class="attr">$$tlb</span>: <span class="literal">true</span>,</div><div class="line"> <span class="attr">link</span>: <span class="function"><span class="keyword">function</span> (<span class="params">$scope, $element, $attr, ctrl, $transclude</span>) </span>{</div><div class="line"> <span class="keyword">var</span> block, childScope, previousElements;</div><div class="line"> $scope.$watch($attr.ngIf, <span class="function"><span class="keyword">function</span> <span class="title">ngIfWatchAction</span>(<span class="params">value</span>) </span>{</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (toBoolean(value)) {</div><div class="line"> <span class="keyword">if</span> (!childScope) {</div><div class="line"> childScope = $scope.$<span class="keyword">new</span>();</div><div class="line"> $transclude(childScope, <span class="function"><span class="keyword">function</span> (<span class="params">clone</span>) </span>{</div><div class="line"> clone[clone.length++] = <span class="built_in">document</span>.createComment(<span class="string">' end ngIf: '</span> + $attr.ngIf + <span class="string">' '</span>);</div><div class="line"> <span class="comment">// Note: We only need the first/last node of the cloned nodes.</span></div><div class="line"> <span class="comment">// However, we need to keep the reference to the jqlite wrapper as it might be changed later</span></div><div class="line"> <span class="comment">// by a directive with templateUrl when its template arrives.</span></div><div class="line"> block = {</div><div class="line"> <span class="attr">clone</span>: clone</div><div class="line"> };</div><div class="line"> $animate.enter(clone, $element.parent(), $element);</div><div class="line"> });</div><div class="line"> }</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">if</span>(previousElements) {</div><div class="line"> previousElements.remove();</div><div class="line"> previousElements = <span class="literal">null</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span>(childScope) {</div><div class="line"> childScope.$destroy();</div><div class="line"> childScope = <span class="literal">null</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span>(block) {</div><div class="line"> previousElements = getBlockElements(block.clone);</div><div class="line"> $animate.leave(previousElements, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> previousElements = <span class="literal">null</span>;</div><div class="line"> });</div><div class="line"> block = <span class="literal">null</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> });</div><div class="line"> }</div><div class="line"> };</div><div class="line">}];</div></pre></td></tr></table></figure></p>
<p>当表达式为<code>false</code>的时候,<code>ng-if</code>指令会移除创建好的元素,<strong>并且销毁与之相关的<code>childScope</code></strong>.<br>当表达式为<code>true</code>的时候,<code>ng-if</code>指令会重新创建DOM元素,<strong>并且会从它的父作用域上继承一个新的子作用域</strong>.<br>这就意味着<code>ng-if</code>会新建新的作用域.这一点我们可以从<code>JavaScript</code>原型来理解:<br><strong>对于从原型对象继承而来的成员,其读和写具有内在的不对等性.</strong><br>举个例子:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Student</span> (<span class="params"></span>) </span>{</div><div class="line"></div><div class="line">}</div><div class="line">Student.prototype.name = <span class="string">'zhangsan'</span>;</div><div class="line">Student.prototype.info = {<span class="string">'sex'</span>: <span class="string">'man'</span>};</div><div class="line"></div><div class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> Student();</div><div class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> Student();</div><div class="line"></div><div class="line">a.name = <span class="string">'lisi'</span>;</div><div class="line">a.info.sex = <span class="string">'woman'</span>;</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(a.name); <span class="comment">// lisi</span></div><div class="line"><span class="built_in">console</span>.log(b.name); <span class="comment">// zhangsan</span></div><div class="line"><span class="built_in">console</span>.log(a.info.sex); <span class="comment">// woman</span></div><div class="line"><span class="built_in">console</span>.log(b.info.sex); <span class="comment">// woman</span></div></pre></td></tr></table></figure></p>
<p>在上述例子中可以发现,当改变<code>a</code>的<code>name</code>时,不会改变原型中的属性.当改变<code>a</code>中<code>info</code>对象的属性时,由于对象是引用的,所以也改变了引用对象的属性.</p>
<p>由此我们可以对这个小坑提出解决方法,可以在<code>ng-if</code>下<code>ng-model</code>赋值的属性,提供一个外部对象的引用:</p>
<iframe height="427" scrolling="no" title="woEmQv" src="//codepen.io/relign/embed/woEmQv/?height=427&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/woEmQv/" target="_blank" rel="external">woEmQv</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>上面还提到一种解决方式,通过<code>$parent</code>引用到外部作用域的属性,也可以解决这个小坑.不过当你<code>ng-if</code>嵌套多层时,这种方法就显然不合适了.</p>
]]></content>
</entry>
<entry>
<title><![CDATA[【总结】调研实现高性能动画]]></title>
<url>https://relign.github.io/Animation/animation-optimize/</url>
<content type="html"><![CDATA[<blockquote>
<p>本文是调研如何实现高性能动画,提升用户体验的总结,文章内容来源于对看过的相关技术文章的总结,相关技术文章已列到文章末尾,如有遗漏,敬请谅解.</p>
</blockquote>
<p>快速响应和高度交互的页面往往能够吸引大量的用户群体.相反,如果页面存在性能低下的动画,动画不流畅,动画过程中页面闪烁等等,如此粗糙的交互体验必然丧失用户量. </p>
<p>对于大多数的设备而言,屏幕以 60 次每秒的频率刷新,即<code>60HZ</code>.如果一个动画中的某些帧超过了这个时间,就会导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象）,出现页面闪烁.因此,高性能的动画都应该保持在<code>60fps</code>左右. </p>
<p>接下来我们看几种动画的实现方式.</p>
<h3 id="基于setTimeout或者setInterval实现的动画"><a href="#基于setTimeout或者setInterval实现的动画" class="headerlink" title="基于setTimeout或者setInterval实现的动画"></a>基于<code>setTimeout</code>或者<code>setInterval</code>实现的动画</h3><h4 id="基于帧算法实现的动画"><a href="#基于帧算法实现的动画" class="headerlink" title="基于帧算法实现的动画"></a>基于帧算法实现的动画</h4><a id="more"></a>
<iframe height="471" scrolling="no" title="rWeGoX" src="//codepen.io/relign/embed/rWeGoX/?height=471&theme-id=0&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/rWeGoX/" target="_blank" rel="external">rWeGoX</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>这是一个基于帧算法实现的JavaScript动画,这里设置的每秒钟更新60次,即<code>60fps</code>.大家可以看到现在的动画还是非常流畅的.动画的帧率也在60附近. </p>
<p>但是由于JavaScript运行时需要耗费时间,而JavaScript又是单线程的,所以如果一个定时器如果比较耗时的话,是会阻塞下一个定时器的执行.所以即使你这里设置了<code>1000 / 60</code>每秒<code>60帧</code>的帧率,在不同的浏览器平台的差异也会导致实际上你的没有<code>60fps</code>的帧率. </p>
<p>所以上面代码在一个手机上执行的时候可能有<code>60fps</code>的帧率,在另外一个手机上可能就只有<code>30fps</code>,更甚可能只有<code>10fps</code>. </p>
<p>我们去模拟一下这几个帧率下的动画:</p>
<iframe height="710" scrolling="no" title="xRVXyG" src="//codepen.io/relign/embed/xRVXyG/?height=710&theme-id=0&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/xRVXyG/" target="_blank" rel="external">xRVXyG</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>很明显产生的交互效果是不符合预期的.导致这种情况的原因很简单,因为我们计算和绘制每个<code>div</code>位置的时候是在每帧更新,每帧移动<code>2px</code>.在<code>60fps</code>的情况下,我们1秒钟会执行<code>60帧</code>,所以小块每秒钟会移动<code>60 * 2 = 120px</code>;如果是<code>30fps</code>,小块每秒就移动<code>30 * 2 = 60px</code>,以此类推<code>10fps</code>就是每秒移动<code>20px</code>.三个小块在单位时间内移动的距离不一样. </p>
<h4 id="基于时间算法实现的动画"><a href="#基于时间算法实现的动画" class="headerlink" title="基于时间算法实现的动画"></a>基于时间算法实现的动画</h4><p>针对于这种情况,我们对其作出改进.我们不再以帧为基准来更新方块的位置,而是以时间为单位更新.也就是说,我们之前是<code>px/frame</code>,现在换成<code>px/ms</code>. </p>
<iframe height="602" scrolling="no" title="XNdVEE" src="//codepen.io/relign/embed/XNdVEE/?height=602&theme-id=0&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/XNdVEE/" target="_blank" rel="external">XNdVEE</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>在这里,我们先确定一个固定更新的时间片,如固定为<code>60fps</code>时一帧的时间:<code>1000 / 60 = 0.167ms</code>.然后积累过去的时间,然后根据固定时间片分片进行更新.也就说,即使这一帧和上一帧相差过去了<code>100ms</code>,我也会把这100ms分成很多个<code>0.167ms</code>来执行<code>update</code>函数.这样做有两个好处:</p>
<ul>
<li>固定的时间片足够小，更新的时候可以减少动画失帧</li>
<li>不同帧率,不管你是<code>60</code>,<code>30</code>,还是<code>10fps</code>,也是根据固定时间片来执行update函数,所以即使有损失,不同帧率之间的损失是一样的.那么我们三个方块就可以达到同步移动的效果的了!</li>
</ul>
<h4 id="基于setTimeout或者setInterval实现动画存在的问题"><a href="#基于setTimeout或者setInterval实现动画存在的问题" class="headerlink" title="基于setTimeout或者setInterval实现动画存在的问题"></a>基于<code>setTimeout</code>或者<code>setInterval</code>实现动画存在的问题</h4><p>使用<code>setTimeout</code>和<code>setInterval</code>来绘制动画,计算延时的精确度是不够的. </p>
<p>延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率.不同版本的浏览器,这个频率是不一样的:IE8及其之前的IE版本更新间隔为15.6毫秒,最新版的Chrome与IE9+浏览器的更新频率都为4ms.而且如果你使用的是笔记本电脑,并且在使用电池而非电源的模式下,为了节省资源,浏览器会将更新频率切换至于系统时间相同,更新频率更低. </p>
<p>而另外一个问题,使用<code>setTimeout</code>和<code>setInterval</code>,需要面临异步队列问题.因为异步关系,<code>setTimeout</code>和<code>setInterval</code>中回调函数并非立即执行.而是需要加入等待队列中.但问题是,如果在等待延迟触发的过程中,有新的同步脚本需要执行,那么同步脚本不会排在回调之后,而是立即执行. </p>
<p>例如:</p>
<iframe height="391" scrolling="no" title="jVqYXw" src="//codepen.io/relign/embed/jVqYXw/?height=391&theme-id=0&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/jVqYXw/" target="_blank" rel="external">jVqYXw</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p>很显然,这样的动画交互体验是不可控的.</p>
<h3 id="基于requestAnimationFrame实现的动画"><a href="#基于requestAnimationFrame实现的动画" class="headerlink" title="基于requestAnimationFrame实现的动画"></a>基于<code>requestAnimationFrame</code>实现的动画</h3><p>针对<code>setTimeout</code>和<code>setInterval</code>实现动画存在的缺陷,<code>Mozilla</code>首先推出了<code>mozRequestAnimationFrame</code>,通过它告诉浏览器某些JavaScript代码将要执行动画,这样浏览器可以在运行某些代码后进行适当的优化.之后,<code>Chrome</code>和<code>IE10+</code>也都给出了自己的实现,<code>webkitRequestAnimationFrame</code>和<code>msRequestAnimationFrame</code>.后来随着<code>HTML5</code>新的API发布,<code>requestAnimationFrame</code>被正式推出.</p>
<p>官方定义:</p>
<blockquote>
<p>window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求.这个方法接受一个函数为参,该函数会在重绘前调用.</p>
</blockquote>
<p>注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 <code>requestAnimationFrame()</code>.</p>
<iframe height="371" scrolling="no" title="qqZxqW" src="//codepen.io/relign/embed/qqZxqW/?height=371&theme-id=0&default-tab=result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/relign/pen/qqZxqW/" target="_blank" rel="external">qqZxqW</a> by songruigang (<a href="http://codepen.io/relign" target="_blank" rel="external">@relign</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.<br></iframe>
<p><code>requestAnimationFrame</code>最大的好处在于可以可以避免浏览器不必要的重绘.想要理解这个好处,我们首先需要简单了解一下浏览器的渲染过程.</p>
<h3 id="浏览器渲染过程"><a href="#浏览器渲染过程" class="headerlink" title="浏览器渲染过程"></a>浏览器渲染过程</h3><p>要实现一个高性能的动画,首选我们必须对浏览器的渲染机制有所了解:</p>
<blockquote>
<p>更加详细的渲染过程解读详见<a href="https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/" target="_blank" rel="external">浏览器的工作原理：新式网络浏览器幕后揭秘</a></p>
</blockquote>
<p>Chrome渲染过程:<br><img src="https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/webkitflow.png" alt="Chrome渲染过程"> </p>
<p>从图中可以看出,浏览在渲染页面过程中依次经历了: </p>
<ol>
<li>HTML Parse(html解析)</li>
<li>Calculate Style(计算样式)</li>
<li>Layout(布局)</li>
<li>Rasterizer(光栅化)</li>
<li>Paint(绘制)</li>
<li>Composite Layers(渲染层合并)</li>
</ol>
<h4 id="HTML-Parser"><a href="#HTML-Parser" class="headerlink" title="HTML Parser"></a>HTML Parser</h4><p>发送<code>http</code>请求,获取请求内容,然后解析HTML的过程.更加详细的可以看这里<a href="https://github.com/alex/what-happens-when" target="_blank" rel="external">What happens when…</a>以及对应的翻译文档<a href="https://github.com/skyline75489/what-happens-when-zh_CN" target="_blank" rel="external">当···时发生了什么?</a></p>
<h4 id="Calculate-Style"><a href="#Calculate-Style" class="headerlink" title="Calculate Style"></a>Calculate Style</h4><p>即计算样式. </p>
<p>Calculate被触发的时候做的事情就是处理JavaScript给元素设置的样式.此时Recalculate Style会计算Render树(渲染树),然后从根节点开始进行页面渲染,将CSS附加到DOM上的过程. </p>
<p>这个过程是根据CSS选择器,对每个DOM元素匹配对应的CSS样式.这一步结束之后,就确定了每个DOM元素上应该应用什么CSS样式规则.</p>
<p><strong>任何企图改变元素样式的操作都会触发Recalculate(重新计算样式)</strong>.同Layout一样,它们都是JavaScript执行完后才触发的.</p>
<h4 id="Layout"><a href="#Layout" class="headerlink" title="Layout"></a>Layout</h4><p>计算页面上的布局,即元素在文档中的位置及大小.正如前面所述,Layout计算的是布局位置信息.</p>
<p>上一步确定了每个DOM元素的样式规则,这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置.</p>
<p>需要注意的是:在页面解析完成后,任何有可能改变元素位置或大小的样式都会触发这个Layout事件. </p>
<p>常见影响布局的CSS属性有:</p>
<ul>
<li><code>width</code></li>
<li><code>height</code></li>
<li><code>padding</code></li>
<li><code>margin</code></li>
<li><code>display</code></li>
<li><code>border-width</code></li>
<li><code>border</code></li>
<li><code>top</code></li>
<li><code>position</code></li>
<li><code>font-size</code></li>
<li><code>float</code></li>
<li><code>text-align</code></li>
<li><code>overflow-y</code></li>
<li><code>font-weight</code></li>
<li><code>overflow</code></li>
<li><code>left</code></li>
<li><code>font-family</code></li>
<li><code>line-height</code></li>
<li><code>vertical-align</code></li>
<li><code>right</code></li>
<li><code>clear</code></li>
<li><code>white-space</code></li>
<li><code>bottom</code></li>
<li><code>min-height</code></li>
</ul>
<p>等等,更多触发Layout事件的属性,可以在<a href="https://csstriggers.com/" target="_blank" rel="external">CSS Triggers</a>网站查阅. </p>
<h4 id="Rasterizer"><a href="#Rasterizer" class="headerlink" title="Rasterizer"></a>Rasterizer</h4><p>光栅化,一般的安卓手机都会进行光栅化,光栅主要是针对图形的一个栅格化过程.低端手机在这部分耗时还是蛮多的.</p>
<h4 id="Paint"><a href="#Paint" class="headerlink" title="Paint"></a>Paint</h4><p>本质上就是填充像素的过程.包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果.一般来说,这个绘制过程是在多个层上完成的.</p>
<p>Paint的工作就是把文档中用户可见的那一部分展现给用户.Paint是把Layout和Calculate的计算的结果直接在浏览器视窗上绘制出来,它并不实现具体的元素计算. </p>
<p>同样,页面解析完成后,改变某些样式也会引起RePaint(重绘).</p>
<p>常见引起RePaint(重绘)的样式:</p>
<ul>
<li><code>color</code></li>
<li><code>border-style</code></li>
<li><code>visibility</code></li>
<li><code>background</code></li>
<li><code>text-decoration</code></li>
<li><code>background-image</code></li>
<li><code>background-position</code></li>
<li><code>background-repeat</code></li>
<li><code>outline-color</code></li>
<li><code>outline</code></li>
<li><code>outline-style</code></li>
<li><code>border-radius</code></li>
<li><code>outline-width</code></li>
<li><code>box-shadow</code></li>
<li><code>background-size</code></li>
</ul>
<p>如果你在元素中对以上的属性设置动画,那么将会引起重绘,并且元素所属的图层将提交给GPU进行处理.<br>对于移动端设备来说,这代价是非常昂贵的,因为它们的CPU的处理能力明显弱于桌面端.这意味着,任务将用更长的时间来完成;并且CPU和GPU之间的带宽是有限的,所以数据的上传需要花费很长的一段时间. </p>
<h4 id="Composite-Layers"><a href="#Composite-Layers" class="headerlink" title="Composite Layers"></a>Composite Layers</h4><p>最后合并图层,输出页面到屏幕.浏览器在渲染过程中会将一些含有特殊样式的DOM结构绘制于其他图层,有点类似于<code>PhotoShop</code>的图层概念.一张图片在<code>PotoShop</code>是由多个图层组合而成,而浏览器最终显示的页面实际也是有多个图层构成的.</p>
<p>在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后在屏幕上呈现.对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常.</p>
<p>常见的导致新图层创建的因素有:</p>
<ul>
<li>进行3D或者透视变换的CSS属性</li>
<li>使用硬件加速视频解码的<code><video></code>元素</li>
<li>具有3D(WebGL)上下文或者硬件加速的2D上下文的<code><canvas></code>元素</li>
<li>组合型插件(即Flash)</li>
<li>具有有CSS透明度动画或者使用动画式Webkit变换的元素</li>
<li>具有硬件加速的CSS滤镜的元素</li>
</ul>
<h3 id="影响动画渲染性能的因素"><a href="#影响动画渲染性能的因素" class="headerlink" title="影响动画渲染性能的因素"></a>影响动画渲染性能的因素</h3><p>上述流程可以归纳为五个关键步骤: </p>
<p><img src="http://cdn2.w3cplus.com/cdn/farfuture/usATdiAyFY--i9MqBmjcTjmP8DVlKngOBmJiJlPoNIs/mtime:1475068062/sites/default/files/blogs/2016/1609/css-animation-4.jpg" alt="浏览器渲染过程"> </p>
<p>这也是我们在实现动画过程中有可能会触发的五个步骤,搞清楚我们实现动画的代码在哪一步,有助于我们实现高性能流畅的动画.<br>在上面的流程中,我们需要注意两个概念 <strong>重排(也就是回流)</strong> 和 <strong>重绘</strong>.这两个概念与上述流程中的Layout和Paint都有关系,而Layout和Paint又对动画渲染的性能至关重要.</p>
<h4 id="重排"><a href="#重排" class="headerlink" title="重排"></a>重排</h4><p><code>Reflow</code>(重排)指的是计算页面布局(Layout).某个节点<code>Reflow</code>时会重新计算节点的尺寸和位置,而且还有可能触发其后代节点<code>Reflow</code>.在这之后再次触发一次<code>Repaint</code>(重绘).</p>
<p>当Render Tree中的一部分(或全部)因为元素的尺寸、布局、隐藏等改变而需要重新构建.这就称为回流,每个页面至少需要一次回流,就是页面第一次加载的时候. </p>
<p>在Web页面中,很多状况下会导致回流:</p>
<ul>
<li>调整窗口大小</li>
<li>改变字体</li>
<li>增加或者移除样式表</li>
<li>内容变化</li>
<li>激活CSS伪类</li>
<li>操作CSS属性</li>
<li>JavaScript操作DOM</li>
<li>计算<code>offsetWidth</code>和<code>offsetHeight</code></li>
<li>设置<code>style</code>属性的值</li>
<li>CSS3 Animation或Transition</li>
</ul>
<h4 id="重绘"><a href="#重绘" class="headerlink" title="重绘"></a>重绘</h4><p><code>Repaint</code>(重绘)或者<code>Redraw</code>遍历所有节点,检测节点的可见性、颜色、轮廓等可见的样式属性,然后根据检测的结果更新页面的响应部分.<br>当Render Tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格、而不会影响布局的.就是重绘.</p>
<p>将重排和重绘的介绍结合起来,不难发现:<strong>重绘(Repaint)不一定会引起回流(Reflow重排),但回流必将引起重绘(Repaint)</strong>.</p>
<p>由此可见,重排和重绘很容易被触发,而他们对动画渲染的性能影响非常大.我们需要做的是尽量不去触发重绘和重排.</p>
<h3 id="动画渲染性能优化"><a href="#动画渲染性能优化" class="headerlink" title="动画渲染性能优化"></a>动画渲染性能优化</h3><p><strong>过早进行性能优化是大忌</strong>,如果我们实现的动画并没有性能方面的问题,就没有必要将时间成本浪费在性能优化上.</p>
<h4 id="在Composite这步优化动画"><a href="#在Composite这步优化动画" class="headerlink" title="在Composite这步优化动画"></a>在<code>Composite</code>这步优化动画</h4><p>在实现用户交互动画的过程中,我们尽量避免重绘和重排.现在浏览器可以利用<code>transform</code>和<code>opacity</code>绘制很好的动画.因为这些属性只会影响<br>浏览器渲染的最后一步<code>Composite</code>过程.</p>
<p>共有四个让动画更好的属性:</p>
<ul>
<li>位置(Position): <code>transform: translateX(n) translateY(n) translateZ(n)</code></li>
<li>缩放(Scale): <code>transform: scale(n)</code></li>
<li>旋转(Rotation): <code>transform: rotate(ndeg)</code></li>
<li>透明度(Opacity): <code>opacity: n</code></li>
</ul>
<h4 id="在GPU上运行动画"><a href="#在GPU上运行动画" class="headerlink" title="在GPU上运行动画"></a>在GPU上运行动画</h4><p>在CSS中提供了一个新的CSS特性:<code>will-change</code>.其主要作用就是 <strong>提前告诉浏览器我这里将会进行一些变动,请分配资源(告诉浏览器要分配资源给我).</strong> 因此浏览器不需要考虑容器布局的渲染或绘制.</p>
<blockquote>
<p><code>will-change</code>属性,允许作者提前告知浏览器的默认样式,那他们可能会做出一个元素.它允许对浏览器默认样式的优化如何提前处理因素,在动画实际开始之前,为准备动画执行潜在昂贵的工作.有关于<code>will-change</code>更详细的介绍可以<a href="http://www.w3cplus.com/css3/introduction-css-will-change-property.html" target="_blank" rel="external">点击这里</a>.</p>
</blockquote>
<p>在使用<code>will-change</code>一定要注意方式方法,比如常见的错误方法是直接在<code>:hover</code>是使用,并没有告诉浏览器分配资源:<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.element</span><span class="selector-pseudo">:hover</span> {</div><div class="line"> <span class="attribute">will-change</span>: transform;</div><div class="line"> <span class="attribute">transition</span>: transform <span class="number">2s</span>;</div><div class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(30deg) <span class="built_in">scale</span>(1.5);</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>其正确使用的方法是,在进入父元素的时候就告诉浏览器,你该分配一定的资源:<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.element</span> {</div><div class="line"> <span class="attribute">transition</span>: opacity .<span class="number">3s</span> linear;</div><div class="line">}</div><div class="line"><span class="comment">/* declare changes on the element when the mouse enters / hovers its ancestor */</span></div><div class="line"><span class="selector-class">.ancestor</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.element</span> {</div><div class="line"> <span class="attribute">will-change</span>: opacity;</div><div class="line">}</div><div class="line"><span class="comment">/* apply change when element is hovered */</span></div><div class="line"><span class="selector-class">.element</span><span class="selector-pseudo">:hover</span> {</div><div class="line"> <span class="attribute">opacity</span>: .<span class="number">5</span>;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>另外在应用变化之后,取消<code>will-change</code>的资源分配:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> el = <span class="built_in">document</span>.getElementById(<span class="string">'demo'</span>);</div><div class="line">el.addEventListener(<span class="string">'animationEnd'</span>, removeHint);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeHint</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>.style.willChange = <span class="string">'auto'</span>;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>在使用<code>will-change</code>时,还需注意:</p>
<ul>
<li>不要将<code>will-change</code>应用到太多元素上:浏览器已经尽力尝试去优化一切可以优化的东西了.有一些更强力的优化,如果与<code>will-change</code>结合在一起的话,有可能会消耗很多机器资源,如果过度使用的话,可能导致页面响应缓慢或者消耗非常多的资源.</li>
<li>有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作.但是如果直接在样式表中显式声明了<code>will-change</code>属性,则表示目标元素可能会经常变化,浏览器会将优化工作保存得比之前更久.所以最佳实践是当元素变化之前和之后通过脚本来切换<code>will-change</code>的值.</li>
<li>不要过早应用<code>will-change</code>优化:如果你的页面在性能方面没什么问题,则不要添加<code>will-change</code>属性来榨取一丁点的速度.<code>will-change</code>的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题.它不应该被用来预防性能问题.过度使用<code>will-change</code>会导致大量的内存占用,并会导致更复杂的渲染过程,因为浏览器会试图准备可能存在的变化过程.这会导致更严重的性能问题.</li>
<li>给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的.然后浏览器可以选择在变化发生前提前去做一些优化工作.所以给浏览器一点时间去真正做这些优化工作是非常重要的.使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化,然后为它加上 <code>will-change</code>属性.</li>
</ul>
<h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><ul>
<li><a href="http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering/" target="_blank" rel="external">Javascript高性能动画与页面渲染</a></li>
<li><a href="http://www.w3cplus.com/animation/how-to-achieve-60-fps-animations-with-css3.html" target="_blank" rel="external">使用CSS3实现60FPS动画</a></li>
<li><a href="https://www.html5rocks.com/zh/tutorials/speed/high-performance-animations/" target="_blank" rel="external">High Performance Animations</a></li>
<li><a href="http://bubkoo.com/2016/03/31/high-performance-animations/" target="_blank" rel="external">使用 FLIP 来提高 Web 动画的性能</a></li>
<li><a href="https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/" target="_blank" rel="external">浏览器的工作原理：新式网络浏览器幕后揭秘</a></li>
<li><a href="http://www.w3cplus.com/animation/animation-performance.html" target="_blank" rel="external">CSS Animation性能优化</a></li>
</ul>
]]></content>
</entry>
<entry>
<title><![CDATA[一场由npm shrinkwrap执行error引发的思考]]></title>
<url>https://relign.github.io/node/npm-shrinkwrap/</url>
<content type="html"><![CDATA[<blockquote>
<p>做项目时执行 <code>npm shrinkwrap</code> 报错,并对这次错误求根问底,贴出来让大家看看,希望跟我出现一样错误的童鞋可以得到解答</p>
</blockquote>
<h2 id="npm-shrinkwrap-命令简介"><a href="#npm-shrinkwrap-命令简介" class="headerlink" title="npm shrinkwrap 命令简介"></a>npm shrinkwrap 命令简介</h2><p>项目开发过程中,当你使用<code>npm install [package] --save</code>安装项目所依赖的包的时候,会在<code>package.json</code>文件中写入包的版本号:<code>"express": "^4.8.7"</code>(一般是这种版本号,<code>^</code>表示允许大版本迭代,即允许<code>4.8.7</code>到<code>5.0.0</code>之间版本的升级).但这样就会出现问题,当你下次执行<code>npm install</code>安装<code>package.json</code>中文件的时候,可能会出现版本不一致导致运行结果不同的情况.</p>
<a id="more"></a>
<p><code>npm shrinkwrap</code>这个命令用来指定项目依赖包的安装版本,可以稳定项目的开发环境.它会在当前目录下创建<code>npm-shrinkwrap.json</code>文件,里面描述了项目所依赖的包,以及这些包内嵌套的包的确定版本号和包的下载位置: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">"acorn-jsx": {</div><div class="line"> "version": "3.0.1",</div><div class="line"> "from": "acorn-jsx@>=3.0.0 <4.0.0",</div><div class="line"> "resolved": "http://r.npm.sankuai.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz",</div><div class="line"> "dependencies": {</div><div class="line"> "acorn": {</div><div class="line"> "version": "3.2.0",</div><div class="line"> "from": "acorn@>=3.0.4 <4.0.0",</div><div class="line"> "resolved": "http://r.npm.sankuai.com/acorn/-/acorn-3.2.0.tgz"</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div></pre></td></tr></table></figure>
<p>当项目中其他人进行开发执行<code>npm install</code>的时候就会去这个文件中找到包的下载位置和版本号去安装,从而实现项目依赖包锁定版本号.如果你想要更新<code>npm-shrinkwrap.json</code>中包的版本,你可以先<code>npm update [package]</code>更新包,再用<code>npm shrinkwrap</code>重新创建<code>npm-shrinkwrap.json</code>文件. </p>
<h2 id="执行npm-shrinkwrap报错"><a href="#执行npm-shrinkwrap报错" class="headerlink" title="执行npm shrinkwrap报错"></a>执行npm shrinkwrap报错</h2><p>新人刚到公司,接手项目,偶然一次机会执行了<code>npm shrinkwrap</code>命令,发现它居然报错了,于是便追根溯源.报错信息如下: </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line">npm WARN shrinkwrap underscore: '^1.8.3' }</div><div class="line">npm ERR! Darwin 16.0.0</div><div class="line">npm ERR! argv "/Users/relign/.nvm/versions/node/v4.4.6/bin/node" "/Users/relign/.nvm/versions/node/v4.4.6/bin/npm" "shrinkwrap"</div><div class="line">npm ERR! node v4.4.6</div><div class="line">npm ERR! npm v3.10.2</div><div class="line"></div><div class="line">npm ERR! Problems were encountered</div><div class="line">npm ERR! Please correct and try again.</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-generator</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-generator/node_modules/lodash</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-plugin-transform-es2015-block-scoping</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-plugin-transform-es2015-block-scoping/node_modules/lodash</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register/node_modules/babel-core</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register/node_modules/babylon</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register/node_modules/core-js</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register/node_modules/lodash</div><div class="line">npm ERR! extraneous: [email protected] /Users/relign/Documents/project/hotel-fe-tbms/node_modules/babel-register/node_modules/minimatch</div><div class="line">npm ERR! missing: pmx@latest, required by [email protected]</div><div class="line">npm ERR! missing: vizion@latest, required by [email protected]</div><div class="line">npm ERR! missing: pm2-axon@latest, required by [email protected]</div><div class="line">npm ERR! missing: pm2-deploy@latest, required by [email protected]</div><div class="line">npm ERR!</div><div class="line">npm ERR! If you need help, you may report this error at:</div><div class="line">npm ERR! <https://github.com/npm/npm/issues></div><div class="line"></div><div class="line">npm ERR! Please include the following file with any support request:</div><div class="line">npm ERR! /Users/relign/Documents/project/hotel-fe-tbms/npm-debug.log</div></pre></td></tr></table></figure>
<p>重点在于<code>Problems were encountered</code>,于是上万能的<code>Google</code>去搜索,搜到如下<a href="https://github.com/SaltwaterC/aws2js/issues/58" target="_blank" rel="external">结果</a>: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">If you want to make shrinkwrap work, you have to have only modules installed via (dev)Dependencies in package.json.</div><div class="line"></div><div class="line">If you use solutions like napa or if you manually installed some modules in node_modules, it won't work.</div><div class="line"></div><div class="line">npm prune removes these extra modules and it should work juster after that.</div></pre></td></tr></table></figure>
<p>如果你想要<code>shrinkwrap</code>起作用,你就只能安装<code>package.json</code>中<code>(dev)Dependencies</code>字段名下的模块.<br>如果你使用了<code>napa</code>或者你在<code>node_modules</code>手动安装了一些模块,<code>shrinkwrap</code>不会起作用.<br><code>npm prune</code> 这个命令可以删除这些模块,然后<code>shrinkwrap</code>就会起作用了.</p>
<h2 id="npm-prune命令简介"><a href="#npm-prune命令简介" class="headerlink" title="npm prune命令简介"></a>npm prune命令简介</h2><p><code>npm prune</code>,用于清除多余的包资源.在项目<code>package.json</code>所在路径下运行这个命令,会移除<code>package.json</code>中没有包含的<code>node_modules</code>的包,如果要移除<code>devDependencies</code>里面的包,命令中加入<code>--production</code>. </p>
<h2 id="新的错误"><a href="#新的错误" class="headerlink" title="新的错误"></a>新的错误</h2><p>执行完<code>npm prune</code>后,我继续执行<code>npm shrinkwrap</code>出现了新的错误: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">npm WARN shrinkwrap underscore: '^1.8.3' }</div><div class="line">npm ERR! Darwin 16.0.0</div><div class="line">npm ERR! argv "/Users/relign/.nvm/versions/node/v4.4.6/bin/node" "/Users/relign/.nvm/versions/node/v4.4.6/bin/npm" "shrinkwrap"</div><div class="line">npm ERR! node v4.4.6</div><div class="line">npm ERR! npm v3.10.2</div><div class="line"></div><div class="line">npm ERR! Problems were encountered</div><div class="line">npm ERR! Please correct and try again.</div><div class="line">npm ERR! missing: pmx@latest, required by [email protected]</div><div class="line">npm ERR! missing: vizion@latest, required by [email protected]</div><div class="line">npm ERR! missing: pm2-axon@latest, required by [email protected]</div><div class="line">npm ERR! missing: pm2-deploy@latest, required by [email protected]</div><div class="line">npm ERR!</div><div class="line">npm ERR! If you need help, you may report this error at:</div><div class="line">npm ERR! <https://github.com/npm/npm/issues></div><div class="line"></div><div class="line">npm ERR! Please include the following file with any support request:</div><div class="line">npm ERR! /Users/relign/Documents/project/hotel-fe-tbms/npm-debug.log</div></pre></td></tr></table></figure>
<p>在错误日志中可以看到关于<code>extraneous</code>相关的错误已经解决了,还剩下<code>missing</code>相关的错误.紧接着好到了先关问题的<a href="https://github.com/JamieMason/shrinkpack/issues/14" target="_blank" rel="external">探讨</a>: </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">npm install</div><div class="line">npm prune</div><div class="line">npm dedupe</div><div class="line">npm install</div><div class="line">npm shrinkwrap --dev</div></pre></td></tr></table></figure>
<p>关键在于<code>npm deduqe</code>命令. </p>
<h2 id="神奇的npm-deduqe"><a href="#神奇的npm-deduqe" class="headerlink" title="神奇的npm deduqe"></a>神奇的npm deduqe</h2><h3 id="令人头疼的npm的依赖"><a href="#令人头疼的npm的依赖" class="headerlink" title="令人头疼的npm的依赖"></a>令人头疼的npm的依赖</h3><p>用过npm1或者npm2的人,尤其是windows的用户,相信大家都遇到过<code>node_modules</code>太多太深的情况,当你复制粘贴删除就会报错. </p>
<p>而使用npm3的童鞋会发现自己的<code>node_modules</code>下面出现了很多你没有<code>npm install</code>安装过的模块. </p>
<p>究其原因是由于npm的依赖方式引起的. </p>
<p>假如项目开发过程中我们写了个模块app,app模块依赖两个包<code>a@1</code>和<code>b@1</code>,其中<code>a@1</code>依赖包<code>c@1</code>,<code>b@1</code>依赖包<code>c@2</code>. </p>
<p>npm1或者npm2安装后是这样的: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">app</div><div class="line">+-- a@1 <-- depends on c@1</div><div class="line">| `-- c@1</div><div class="line">`-- b@1 <-- depends on c@2</div><div class="line"> `-- c@2</div></pre></td></tr></table></figure>
<p>npm1或者npm2安装模块,不会去理会包之间的公共依赖关系,依赖模块会一层一层继续安装下去,这样<code>node_modules</code>很容易就会超过windows资源管理器能处理的最长路径长度了,也就是你在windows下复制粘贴删除<code>node_modules</code>会报错的原因了. </p>
<p>npm3安装后是这样的:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">app</div><div class="line">+-- a@1 <-- depends on c@1</div><div class="line">+-- c@1</div><div class="line">`-- b@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div></pre></td></tr></table></figure>
<p>npm3会按照<code>package.json</code>中依赖模块的顺序依赖模块,安装<code>a@1</code>的时候发现<code>c@1</code>没有安装过,在现有的情况下也没有其他版本的<code>c</code>模块冲突,它会把<code>c@1</code>便会放在第一层目录,而<code>c@2</code>为了避免和<code>c@1</code>冲突,还是继续放在<code>b@1</code>下面. </p>
<p><strong>npm3在一定程度上处理了包之间的公共依赖关系</strong>.<br>这里为什么要说是一定程度呢？现在app又需要安装一个<code>d@1</code>,<code>d@1</code>依赖<code>c@2</code>,npm3安装后会是这样: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">app</div><div class="line">+-- a@1 <-- depends on c@1</div><div class="line">+-- c@1</div><div class="line">+-- b@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">`-- d@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div></pre></td></tr></table></figure>
<p>因为之前安装<code>a@1</code>的时候,依赖的<code>c@1</code>已经被放到第一层目录,后续安装其他依赖包的时候,如果安装包依赖<code>c</code>,只要版本不是<code>1</code>,为了避免和<code>c@1</code>冲突,都会安装到相应的包下面. </p>
<p>接下来app又依赖<code>e@1</code>,而<code>e@1</code>又依赖<code>c@1</code>,但是<code>c@1</code>已经安装过了,并且不会版本冲突,那么npm3安装后就会变成这样: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">app</div><div class="line">+-- a@1 <-- depends on c@1</div><div class="line">+-- c@1</div><div class="line">+-- b@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">+-- d@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">`-- e@1</div></pre></td></tr></table></figure>
<p>紧接着问题来了,app要升级了,<code>a@1</code>要升成<code>a@2</code>,而<code>a@2</code>依赖<code>c@2</code>,<br><code>e@1</code>升级<code>e@2</code>,<code>e@2</code>依赖<code>c@2</code>,这时<code>c@1</code>不再被依赖,<code>npm</code>安装时就会卸载<code>c@1</code>,npm3安装后就会变成这样: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">app</div><div class="line">+-- a@2 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">+-- c@2</div><div class="line">+-- b@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">+-- d@1 <-- depends on c@2</div><div class="line"> `-- c@2`</div><div class="line">`-- e@2</div></pre></td></tr></table></figure>
<p>预期结果跟大家想的不一样吧,模块出现了冗余,既然模块都依赖<code>c@2</code>,为什么还需要安装这么多呢?这时,神奇的<code>npm dedupe</code>就出现了. </p>
<h3 id="npm-dedupe简介"><a href="#npm-dedupe简介" class="headerlink" title="npm dedupe简介"></a>npm dedupe简介</h3><p>项目开发过程中,npm的树状依赖结构很大几率会导致重复的模块和代码量的臃肿,<code>npm dedupe</code>可以尽量去压平依赖树. </p>
<p>在npm的<a href="https://docs.npmjs.com/cli/dedupe" target="_blank" rel="external">文档</a>中对它是这么解释的: </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">Searches the local package tree and attempts to </div><div class="line">simplify the overall structure by moving dependencies </div><div class="line">further up the tree, where they can be more effectively shared by multiple dependent packages.</div></pre></td></tr></table></figure>
<p>这个命令会去搜索本地的<code>node_modules</code>中的包,并且通过移动相同的依赖包到外层目录去尽量简化这种依赖树的结构,让公用包更加有效被引用. </p>
<p>那么上面的例子执行一次<code>npm dedupe</code>,就会变成这样: </p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">+-- a@2 <-- depends on c@2</div><div class="line">+-- c@2</div><div class="line">+-- b@1 <-- depends on c@2</div><div class="line">+-- d@1 <-- depends on c@2</div><div class="line">`-- e@2</div></pre></td></tr></table></figure>
<p>那么现在这个结构就是最优结构了.同时解决了Windows上令人头疼的问题. </p>
<p><strong>参考资料</strong> </p>
<ul>
<li><a href="https://docs.npmjs.com/cli/dedupe" target="_blank" rel="external">npm-dedupe</a></li>
<li><a href="http://www.jianshu.com/p/8a114304dd6e" target="_blank" rel="external">玩转npm</a></li>
<li><a href="https://www.zhihu.com/question/24414899" target="_blank" rel="external">npm、bower、jamjs 等包管理器，哪个比较好用</a></li>
<li><a href="http://www.cnblogs.com/JuFoFu/p/5643471.html" target="_blank" rel="external">npm 重点小结</a></li>
<li><a href="http://stackoverflow.com/questions/35982100/npm-shrinkwrap-extraneous-module" target="_blank" rel="external">npm shrinkwrap extraneous module</a></li>
</ul>
]]></content>
</entry>
<entry>
<title><![CDATA[关于ng-table v0.3.3的那些事 (一)]]></title>
<url>https://relign.github.io/Angular/angular-05/</url>
<content type="html"><![CDATA[<blockquote>
<p>入职一周左右发现项目中使用<code>ngTable</code>版本是v0.3.3,而github上<code>ngTable</code>版本已经更新到v1.0.0,找到一篇v0.3.3的英文api进行翻译.同时抽出时间看看官方给出的例子总结了一下v0.3.3,希望可以帮到后续入职的新同学快速上手,老司机请绕路哈.</p>
</blockquote>
<h3 id="ngTable指令Config简介"><a href="#ngTable指令Config简介" class="headerlink" title="ngTable指令Config简介"></a>ngTable指令Config简介</h3><p><code>ngTable</code>指令可以美化你的<code>table</code>.它支持表格数据排序,过滤筛选和分页.当表格初始化完成后会自动带有头部和过滤器.<br>假如你想让<code>ngTable</code>在IE9以下运行,你需要<code>jQuery</code>:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment"><!--[if lt IE 9]></span></div><div class="line"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></div><div class="line"><![endif]--></div></pre></td></tr></table></figure>
<p><code>ngTable</code>指令通过在<code>table</code>标签上挂在<code>ng-table</code>属性来启动.而<code>ng-table</code>属性的值对应你挂载到<code>scope</code>上的一个<code>ngTableParams</code>实例化以后的对象.举个例子: </p>
<p>HTML:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">table</span> <span class="attr">ng-table</span>=<span class="string">"tableParams"</span>></span></div><div class="line"> ...</div><div class="line"><span class="tag"></<span class="name">table</span>></span></div></pre></td></tr></table></figure>
<a id="more"></a>
<p>Controller: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$scope.tableParams = <span class="keyword">new</span> ngTableParams(parameters, settings)</div></pre></td></tr></table></figure>
<p>当对<code>ngTableParams</code>进行实例化的时候,这个函数会接收两个参数<code>parameters</code>和<code>settings</code>.下面我们详细介绍一下这两个参数.</p>
<h3 id="parameters"><a href="#parameters" class="headerlink" title="parameters"></a>parameters</h3><p><code>parameters</code>对象应该定义一些初始化的配置.更多复杂的配置应该在<code>setting</code>对象中进行.下面这些属性可以被设置到<code>parameters</code>对象中.</p>
<h4 id="page"><a href="#page" class="headerlink" title="page"></a><code>page</code></h4><p>类型: <code>Number</code>,默认值:<code>1</code><br>表格展示第几页 </p>
<h4 id="count"><a href="#count" class="headerlink" title="count"></a><code>count</code></h4><p>类型: <code>Number</code>,默认值:<code>1</code><br>表格每一页展示多少数据</p>
<h4 id="filter"><a href="#filter" class="headerlink" title="filter"></a><code>filter</code></h4><p>类型: <code>Object</code>,默认值:<code>{}</code><br>定义表格列的过滤器.不区分大小写.举个例子,绑定一个下拉框作为表格的过滤器:<br>in view:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">"status"</span> <span class="attr">ng-model</span>=<span class="string">"filters.status"</span> <span class="attr">...</span>></span></div></pre></td></tr></table></figure>
<p>in controller:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$scope.filters = {</div><div class="line"> <span class="attr">status</span>: <span class="string">''</span></div><div class="line">};</div></pre></td></tr></table></figure>
<p>in ngTableParams: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$scope.tableParams = <span class="keyword">new</span> ngTableParams(</div><div class="line"> {</div><div class="line"> ...</div><div class="line"> <span class="comment">// Attach filters to ng-table.</span></div><div class="line"> filter: $scope.filters</div><div class="line"> },</div><div class="line"> {</div><div class="line"> ...</div><div class="line"> }</div><div class="line">);</div></pre></td></tr></table></figure>
<h4 id="sorting"><a href="#sorting" class="headerlink" title="sorting"></a><code>sorting</code></h4><p>类型: <code>Object</code>,默认值:<code>{}</code><br>定义表格的列排序.举个例子,首先给出数据: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> data = [</div><div class="line"> {<span class="string">"name"</span>: <span class="string">"Moroni"</span>, <span class="string">"age"</span>: <span class="number">50</span>},</div><div class="line"> {<span class="string">"name"</span>: <span class="string">"Tiancum"</span>, <span class="string">"age"</span>: <span class="number">43</span>}</div><div class="line">];</div></pre></td></tr></table></figure>
<p>你可以通过设置<code>sorting</code>定义一个表格名字的升序排列:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="string">"name"</span>: <span class="string">"asc"</span></div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="settings"><a href="#settings" class="headerlink" title="settings"></a>settings</h3><h4 id="total"><a href="#total" class="headerlink" title="total"></a><code>total</code></h4><p>类型: <code>Number</code>,默认值: <code>0</code><br>定义表格数据的总数,通常为你需要渲染的Array数据的length. </p>
<h4 id="counts"><a href="#counts" class="headerlink" title="counts"></a><code>counts</code></h4><p>类型: <code>Array</code>,默认值: <code>[10,25,50,100]</code><br>定义表格每页显示数据数量的选项卡,可以通过设置一个空的数组来禁用这个功能. </p>
<h4 id="defaultSort"><a href="#defaultSort" class="headerlink" title="defaultSort"></a><code>defaultSort</code></h4><p>类型: <code>String</code>, 默认值: <code>desc</code>, 可选项:<code>["asc","desc"]</code><br>定义一个默认的排列顺序,当你点击一个之前没有被排序的列数据时,按照默认的排列顺序进行排序. </p>
<h4 id="groupBy"><a href="#groupBy" class="headerlink" title="groupBy"></a><code>groupBy</code></h4><p>类型: <code>String | Function</code><br>定义表格数据分组.你可以设置<code>groupBy</code>对数据进行分组:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> data = [</div><div class="line"> {<span class="attr">name</span>: <span class="string">"Moroni"</span>, <span class="attr">age</span>: <span class="number">50</span>},</div><div class="line"> {<span class="attr">name</span>: <span class="string">"Tiancum"</span>, <span class="attr">age</span>: <span class="number">43</span>}</div><div class="line">];</div><div class="line">...</div><div class="line">groupBy: <span class="string">'name'</span></div></pre></td></tr></table></figure>
<p>或者通过传入回调函数设置你的分组规则:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Group by first letter of name + age</span></div><div class="line"><span class="comment">// The item parameter is provided internally by ngTable</span></div><div class="line">groupBy: <span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>{</div><div class="line"> <span class="keyword">return</span> item.name[<span class="number">0</span>] + item.age;</div><div class="line">}</div></pre></td></tr></table></figure>
<blockquote>
<p>关于<code>groupBy</code>的说明并不太懂,之后会上手几个demo看看</p>
</blockquote>
<h4 id="filterDelay"><a href="#filterDelay" class="headerlink" title="filterDelay"></a><code>filterDelay</code></h4><p>类型: <code>Number</code>, 默认值: <code>750</code><br>定义一个表格过滤器参数变化时,数据被显示在表格中的延迟时间.例如,你先想要按键过滤器的延迟效果.</p>
<h4 id="data"><a href="#data" class="headerlink" title="data"></a><code>data</code></h4><p>类型: <code>Array</code>, 默认值: <code>[]</code><br>最初的数据集,由 <code>{colname:value}</code>键值对组成的<code>object</code>对象.</p>
<h4 id="getData"><a href="#getData" class="headerlink" title="getData"></a><code>getData</code></h4><p>类型: <code>Function</code><br>定义一个方法处理要展示在<code>ngTable</code>中的数据.<code>ngTable</code>可以通过<code>getData</code>传入的两个参数<code>$defer</code>和<code>params</code>进行回调.举个例子:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">getData: <span class="function"><span class="keyword">function</span> (<span class="params">$defer, params</span>) </span>{</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
<p><code>$defer</code> 是一个<code>Promise</code>对象.通过调用<code>$defer</code>的<code>resolve</code>方法传递<code>data</code>数据到<code>ngTable</code>.<br>举个例子,给出如下的<code>data</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> data = [</div><div class="line"> {<span class="attr">name</span>: <span class="string">"Moroni"</span>, <span class="attr">age</span>: <span class="number">50</span>},</div><div class="line"> {<span class="attr">name</span>: <span class="string">"Tiancum"</span>, <span class="attr">age</span>: <span class="number">43</span>}</div><div class="line">];</div></pre></td></tr></table></figure>
<p>通过这个最基础的方法,你可以让<code>ngTable</code>获得<code>data</code>数据:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">getData: <span class="function"><span class="keyword">function</span> (<span class="params">$defer, params</span>) </span>{</div><div class="line"> $defer.resolve(data);</div><div class="line">}</div></pre></td></tr></table></figure>
<p><code>params</code>对应的是你在<code>parameters</code>对象中的配置(否则你再<code>parameters</code>中也没有设置,就会使用<code>ngTable</code>的默认配置);<br>举个例子,检索现在<code>parameters</code>的<code>filter</code>和<code>sorting</code>的配置:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">getData: <span class="function"><span class="keyword">function</span> (<span class="params">$defer, params</span>) </span>{</div><div class="line"> ...</div><div class="line"> var filter = params.filter();</div><div class="line"> <span class="keyword">var</span> sorting = params.sorting();</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
<p>设置<code>paramters</code>中的<code>total</code>,你可以这样引用变量<code>vm.tableParams.total(value)</code>.举个例子,在<code>ngTable</code>中使用<code>ajax</code>请求数据:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.tableParams = <span class="keyword">new</span> ngTableParams(</div><div class="line"> {<span class="attr">page</span>: <span class="number">1</span>, <span class="attr">count</span>: <span class="number">10</span>},</div><div class="line"> {</div><div class="line"> <span class="attr">total</span>: <span class="number">0</span>,</div><div class="line"> <span class="attr">getData</span>: <span class="function"><span class="keyword">function</span> (<span class="params">$defer, params</span>) </span>{</div><div class="line"> <span class="keyword">var</span> filter = params.filter();</div><div class="line"> <span class="keyword">var</span> sorting = params.sorting();</div><div class="line"> <span class="keyword">var</span> count = params.count();</div><div class="line"> <span class="keyword">var</span> page = params.page();</div><div class="line"> myService.query(page, count, filter, sorting).success(<span class="function"><span class="keyword">function</span> (<span class="params">result</span>) </span>{</div><div class="line"> vm.tableParams.total(result.total);</div><div class="line"> $defer.resolve(result.data);</div><div class="line"> });</div><div class="line"> }</div><div class="line"> }</div><div class="line">);</div></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title><![CDATA[Angular源码解读之不同版本的Extend]]></title>
<url>https://relign.github.io/Angular/angular-04/</url>
<content type="html"><![CDATA[<blockquote>
<p>此文章比较各个版本之间Angular的Extend方法</p>
</blockquote>
<h3 id="版本1-2-26"><a href="#版本1-2-26" class="headerlink" title="版本1.2.26"></a>版本1.2.26</h3><p>此时的Angular Extend精简至极,只进行了浅拷贝.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">dst</span>) </span>{</div><div class="line"> <span class="keyword">var</span> h = dst.$$hashKey;</div><div class="line"> forEach(<span class="built_in">arguments</span>, <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (obj !== dst) { <span class="comment">// 做判断去除同类的继承</span></div><div class="line"> forEach(obj, <span class="function"><span class="keyword">function</span>(<span class="params">value, key</span>) </span>{</div><div class="line"> dst[key] = value; <span class="comment">// 对传入参数进行循环,将一个或者多个的可枚举属性复制到dst对象中</span></div><div class="line"> });</div><div class="line"> }</div><div class="line"> });</div><div class="line"></div><div class="line"> setHashKey(dst,h);<span class="comment">// 为对象增加hash值,方便后续遍历过滤处理操作</span></div><div class="line"> <span class="keyword">return</span> dst;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>上面的代码多的仅仅是将传入的参数中可枚举的属性复制到dst对象,并返回这个新的对象,传入参数中靠后的argument会覆盖调靠前的.<br>列举一个简单的例子:</p>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> consData = {</div><div class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>,</div><div class="line"> <span class="attr">age</span>: <span class="string">'12'</span>,</div><div class="line"> <span class="attr">say</span>: {</div><div class="line"> <span class="attr">sex</span>: <span class="string">'man'</span></div><div class="line"> },</div><div class="line"> <span class="attr">cc</span>: [<span class="string">'1'</span>,<span class="string">'2'</span>,<span class="string">'3'</span>]</div><div class="line">};</div><div class="line"><span class="keyword">var</span> bbData = {</div><div class="line"> <span class="attr">name</span>: <span class="string">'lisi'</span>,</div><div class="line"> <span class="attr">nam</span>: <span class="string">'123'</span>,</div><div class="line"> <span class="attr">say</span>: {</div><div class="line"> <span class="attr">sex</span>: <span class="string">'woman'</span>,</div><div class="line"> <span class="attr">mm</span>: <span class="string">'wang'</span></div><div class="line"> },</div><div class="line"> <span class="attr">cc</span>: [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>]</div><div class="line">};</div><div class="line"><span class="built_in">console</span>.log(angular.extend(consData, bbData));</div></pre></td></tr></table></figure>
<p>最终输出结果是</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">Object{</div><div class="line"> "age": "12",</div><div class="line"> "cc": ["a","b","c"],</div><div class="line"> "nam": "123",</div><div class="line"> "name": "lisi",</div><div class="line"> "say": {</div><div class="line"> "mm": "wang",</div><div class="line"> "sex": "woman"</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>由此可见<code>extend</code>依次会将传入参数的第一层属性赋值给第一个参数的第一层属性,如果属性相同,则后面的值会覆盖前面的,如果是对象或者数组,则会引用同一个,靠后的优先级高,并返回第一个参数对象.</p>
<h3 id="版本1-3-9"><a href="#版本1-3-9" class="headerlink" title="版本1.3.9"></a>版本1.3.9</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">dst</span>) </span>{</div><div class="line"> <span class="keyword">var</span> h = dst.$$hashKey;</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>, ii = <span class="built_in">arguments</span>.length; i < ii; i++) {</div><div class="line"> <span class="keyword">var</span> obj = <span class="built_in">arguments</span>[i];</div><div class="line"> <span class="keyword">if</span> (obj) { <span class="comment">// 这里不再做同类的判断</span></div><div class="line"> <span class="keyword">var</span> keys = <span class="built_in">Object</span>.keys(obj);</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>, jj = keys.length; j < jj; j++) {</div><div class="line"> <span class="keyword">var</span> key = keys[j];</div><div class="line"> dst[key] = obj[key];</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> setHashKey(dst, h);</div><div class="line"> <span class="keyword">return</span> dst;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>这个版本的<code>extend</code>脱离了Angular自己定义的<code>forEach</code>方法,减少了代码的耦合性. </p>
<h4 id="Object-keys"><a href="#Object-keys" class="headerlink" title="Object.keys()"></a><code>Object.keys()</code></h4><p>由于Angular在1.2.4版本后就放弃了对IE8的支持,所以这里用了<code>Object.keys()</code>去获取传入对象的可枚举属性.<br>关于<code>Object.keys()</code>看下面这个例子:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> consData = {</div><div class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>,</div><div class="line"> <span class="attr">age</span>: <span class="string">'12'</span>,</div><div class="line"> <span class="attr">say</span>: {</div><div class="line"> <span class="attr">sex</span>: <span class="string">'man'</span></div><div class="line"> }</div><div class="line">};</div><div class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(consData));</div></pre></td></tr></table></figure>
<p>输出结果是<code>['name','age','say']</code>,由此也可以看出<code>angular.extend()</code>并不支持深拷贝.<br>关于<code>Object.keys()</code>你还要需要注意:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Object</span>.keys(<span class="string">"foo"</span>);</div><div class="line"><span class="comment">// TypeError: "foo" is not an object (ES5 code)</span></div><div class="line"></div><div class="line"><span class="built_in">Object</span>.keys(<span class="string">"foo"</span>);</div><div class="line"><span class="comment">// ["0", "1", "2"] (ES6 code)</span></div></pre></td></tr></table></figure>
<h3 id="版本1-4-0"><a href="#版本1-4-0" class="headerlink" title="版本1.4.0"></a>版本1.4.0</h3><p><code>Angular.extend()</code> 方法发生重大变化:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">dst</span>) </span>{</div><div class="line"> <span class="keyword">return</span> baseExtend(dst, slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>), <span class="literal">false</span>);</div><div class="line">}</div></pre></td></tr></table></figure>
<p><code>extend</code>方法返回一个闭包函数<code>baseExtend</code>,在这里你可能会对<code>slice.call(arguments, 1)</code>有疑惑.这里首先在Angular源码244行附近你会找到<code>var slice = [].slice;</code> 那么在<code>baseExtend</code>方法中传入的第二个参数实际是<code>[].slice.call(argumens, 1)</code>,其实也就是<code>Array.prototype.slice.call()</code>.我们只道<code>arguments</code>实际是一个带有<code>length</code>属性的对象,而<code>Array.prototype.slice.call()</code>这个方法可以具有length属性的对象转成数组，除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换);</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = {<span class="number">0</span>:<span class="string">'first'</span>,<span class="number">1</span>:<span class="string">'second'</span>,<span class="number">2</span>:<span class="string">'third'</span>};</div><div class="line"><span class="built_in">console</span>.log([].slice.call(a)); <span class="comment">// []</span></div><div class="line"><span class="keyword">var</span> b = {<span class="number">0</span>:<span class="string">'first'</span>,<span class="number">1</span>:<span class="string">'second'</span>,<span class="number">2</span>:<span class="string">'third'</span>,<span class="attr">length</span>:<span class="number">3</span>};</div><div class="line"><span class="built_in">console</span>.log([].slice.call(b)); <span class="comment">// ['first','second','third']</span></div></pre></td></tr></table></figure>
<blockquote>
<p>关于<code>Array.prototype.slice.call()</code>实现过程的猜测见肥杜的Blog <a href="http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html" target="_blank" rel="external">Array.prototype.slice.call(arguments)</a></p>
</blockquote>
<p>下面我们看看<code>baseExtend</code>干了什么:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * Set or clear the hashkey for an object.</div><div class="line"> * @param obj object</div><div class="line"> * @param h the hashkey (!truthy to delete the hashkey)</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">setHashKey</span>(<span class="params">obj, h</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (h) {</div><div class="line"> obj.$$hashKey = h;</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">delete</span> obj.$$hashKey;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">baseExtend</span>(<span class="params">dst, objs, deep</span>) </span>{</div><div class="line"> <span class="keyword">var</span> h = dst.$$hashKey;</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, ii = objs.length; i < ii; ++i) {</div><div class="line"> <span class="keyword">var</span> obj = objs[i];</div><div class="line"> <span class="keyword">if</span> (!isObject(obj) && !isFunction(obj)) <span class="keyword">continue</span>;</div><div class="line"> <span class="keyword">var</span> keys = <span class="built_in">Object</span>.keys(obj);</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>, jj = keys.length; j < jj; j++) {</div><div class="line"> <span class="keyword">var</span> key = keys[j];</div><div class="line"> <span class="keyword">var</span> src = obj[key];</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (deep && isObject(src)) {</div><div class="line"> <span class="keyword">if</span> (!isObject(dst[key])) dst[key] = isArray(src) ? [] : {};</div><div class="line"> baseExtend(dst[key], [src], <span class="literal">true</span>);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> dst[key] = src;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> setHashKey(dst, h);</div><div class="line"> <span class="keyword">return</span> dst;</div><div class="line">}</div></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title><![CDATA[Angular源码解读之minErr]]></title>
<url>https://relign.github.io/Angular/angular-03/</url>
<content type="html"><![CDATA[<blockquote>
<p>错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制，在程序执行发生问题的条件下，异常会在中断程序执行，同时会沿着代码的执行路径一步一步的向上抛出异常，最终会由顶层抛出异常信息。而与异常同时出现的往往是日志，而日志往往需要记录具体发生异常的模块、编码、详细的错误信息、执行堆栈等，方便问题的快速定位分析。<br> <strong><em>摘自无风听海的博客<a href="http://www.cnblogs.com/wufengtinghai/p/5428753.html" target="_blank" rel="external">angular代码分析之异常日志设计</a></em></strong></p>
</blockquote>
<p> 打开Angular源码首先看到的就是这个<code>minErr</code>函数,这个函数是angular对异常信息的处理函数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @description</div><div class="line"> *</div><div class="line"> * This object provides a utility for producing rich Error messages within</div><div class="line"> * Angular. It can be called as follows:</div><div class="line"> *</div><div class="line"> * var exampleMinErr = minErr('example');</div><div class="line"> * throw exampleMinErr('one', 'This {0} is {1}', foo, bar);</div><div class="line"> *</div><div class="line"> * The above creates an instance of minErr in the example namespace. The</div><div class="line"> * resulting error will have a namespaced error code of example.one. The</div><div class="line"> * resulting error will replace {0} with the value of foo, and {1} with the</div><div class="line"> * value of bar. The object is not restricted in the number of arguments it can</div><div class="line"> * take.</div><div class="line"> *</div><div class="line"> * If fewer arguments are specified than necessary for interpolation, the extra</div><div class="line"> * interpolation markers will be preserved in the final string.</div><div class="line"> *</div><div class="line"> * Since data will be parsed statically during a build step, some restrictions</div><div class="line"> * are applied with respect to how minErr instances are created and called.</div><div class="line"> * Instances should have names of the form namespaceMinErr for a minErr created</div><div class="line"> * using minErr('namespace') . Error codes, namespaces and template strings</div><div class="line"> * should all be static strings, not variables or general expressions.</div><div class="line"> *</div><div class="line"> * @param {string} module The namespace to use for the new minErr instance.</div><div class="line"> * @returns {function(code:string, template:string, ...templateArgs): Error} minErr instance</div><div class="line"> */</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">minErr</span>(<span class="params">module</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> code = <span class="built_in">arguments</span>[<span class="number">0</span>],</div><div class="line"> prefix = <span class="string">'['</span> + (<span class="built_in">module</span> ? <span class="built_in">module</span> + <span class="string">':'</span> : <span class="string">''</span>) + code + <span class="string">'] '</span>, <span class="comment">//构造日志前缀</span></div><div class="line"> template = <span class="built_in">arguments</span>[<span class="number">1</span>],</div><div class="line"> templateArgs = <span class="built_in">arguments</span>,</div><div class="line"> stringify = <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj === <span class="string">'function'</span>) {</div><div class="line"> <span class="keyword">return</span> obj.toString().replace(<span class="regexp">/ \{[\s\S]*$/</span>, <span class="string">''</span>);</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj === <span class="string">'undefined'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="string">'undefined'</span>;</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">'string'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="built_in">JSON</span>.stringify(obj);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> obj;</div><div class="line"> },</div><div class="line"> message, i;</div><div class="line"> <span class="comment">//模板信息替换</span></div><div class="line"> message = prefix + template.replace(<span class="regexp">/\{\d+\}/g</span>, <span class="function"><span class="keyword">function</span> (<span class="params">match</span>) </span>{</div><div class="line"> <span class="comment">//获取占位符索引,转化为数字</span></div><div class="line"> <span class="keyword">var</span> index = +match.slice(<span class="number">1</span>, <span class="number">-1</span>), arg;</div><div class="line"> <span class="comment">//获取替换占位符的传入参数对象的字符串表示形式</span></div><div class="line"> <span class="keyword">if</span> (index + <span class="number">2</span> < templateArgs.length) {</div><div class="line"> arg = templateArgs[index + <span class="number">2</span>];</div><div class="line"> <span class="comment">// 将传入的对象转化为便于调试的字符串形式</span></div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> arg === <span class="string">'function'</span>) {</div><div class="line"> <span class="keyword">return</span> arg.toString().replace(<span class="regexp">/ ?\{[\s\S]*$/</span>, <span class="string">''</span>);<span class="comment">// 如果是函数则清空函数体</span></div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> arg === <span class="string">'undefined'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="string">'undefined'</span>;</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> arg !== <span class="string">'string'</span>) {</div><div class="line"> <span class="keyword">return</span> toJson(arg);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> arg;</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> match;</div><div class="line"> });</div><div class="line"></div><div class="line"> message = message + <span class="string">'\nhttp://errors.angularjs.org/1.2.26/'</span> +</div><div class="line"> (<span class="built_in">module</span> ? <span class="built_in">module</span> + <span class="string">'/'</span> : <span class="string">''</span>) + code;</div><div class="line"> <span class="keyword">for</span> (i = <span class="number">2</span>; i < <span class="built_in">arguments</span>.length; i++) {</div><div class="line"> message = message + (i == <span class="number">2</span> ? <span class="string">'?'</span> : <span class="string">'&'</span>) + <span class="string">'p'</span> + (i<span class="number">-2</span>) + <span class="string">'='</span> +</div><div class="line"> <span class="built_in">encodeURIComponent</span>(stringify(<span class="built_in">arguments</span>[i]));</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(message);</div><div class="line"> };</div><div class="line">}</div></pre></td></tr></table></figure>
<a id="more"></a>
<p>结合注释给出的例子来看:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> foo = <span class="string">'1234'</span>, bar = <span class="string">'3456'</span>;</div><div class="line"><span class="keyword">var</span> exampleMinErr = minErr(<span class="string">'example'</span>);</div><div class="line"><span class="keyword">throw</span> exampleMinErr(<span class="string">'one'</span>, <span class="string">'This {0} is {1}'</span>, foo, bar);</div></pre></td></tr></table></figure>
<p>首先angular通过<code>minErr('example')</code> 传入<code>example</code>(module参数,类似的还有:<code>minErr(ng)</code>,<code>minErr('$injector')</code>等等),并在返回的闭包函数中引用module.接着传入四个参数,初始化一些变量:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> code = <span class="built_in">arguments</span>[<span class="number">0</span>], <span class="comment">// 'one' 日志编码</span></div><div class="line"> prefix = <span class="string">'['</span> + (<span class="built_in">module</span> ? <span class="built_in">module</span> + <span class="string">':'</span> : <span class="string">''</span>) + code + <span class="string">'] '</span>, <span class="comment">// [example:one] 构造日志前缀</span></div><div class="line"> template = <span class="built_in">arguments</span>[<span class="number">1</span>], <span class="comment">// 'This {0} is {1}' 日志模板</span></div><div class="line"> templateArgs = <span class="built_in">arguments</span>, <span class="comment">// ["one", "This {0} is {1}", "1234", "3456"] 传入参数</span></div><div class="line"> stringify = <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj === <span class="string">'function'</span>) {</div><div class="line"> <span class="keyword">return</span> obj.toString().replace(<span class="regexp">/ \{[\s\S]*$/</span>, <span class="string">''</span>);</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj === <span class="string">'undefined'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="string">'undefined'</span>;</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">'string'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="built_in">JSON</span>.stringify(obj);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> obj;</div><div class="line"> },<span class="comment">// 定义一个方法 先留着 不解释</span></div><div class="line"> message, i;</div></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title><![CDATA[【转】Eslint的配置说明]]></title>
<url>https://relign.github.io/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/eslint-01/</url>
<content type="html"><![CDATA[<!-- tags: [Eslint, 转载]
category: 转载 -->
<h2 id="什么是ESLint？"><a href="#什么是ESLint？" class="headerlink" title="什么是ESLint？"></a>什么是ESLint？</h2><p>当<code>C语言</code>刚成为计算机语言的时候，有一些常见的错误不能够被原始的编译器捕捉，所以一个名为Lint的辅助程序被开发出来，用来扫面源文件中的错误。</p>
<p>在Douglas Rockford 的<strong><javascript： the="" good="" parts=""></javascript：></strong> 也提到，JavaScript是一门「年轻的语言」，因此也就存在很多糟粕的地方，这些糟粕使得程序员在编写JavaScript代码的时候，容易出错，而不易被编辑器或程序员本身发现。于是Douglas Crockford亲自操刀，编写了JSLint代码规范检测工具，其认为JSLint是JavaScript的一个更加严格的子集，也就是他说的Good Parts，使用JSLint就能够检测我们在编程过程中无意得使用了一些「糟粕」的地方，避免了程序出错。</p>
<p>而ESLint是Nicholas C.Zakas编写的另外一份JavaScript代码规范检测工具，这当然不是重复得造轮子（大神不屑造轮子，大神一般都是重新发现轮子），在使用JSLint的时候，JSLint不是以插件的形式实现的，而是重新包装一个工具，可能Nicholas C.Zakas不喜欢这种方式，其认为代码规范检测工具（ESLint）应该是可插拔（使用插件），可配置的，于是自己便高高兴兴去写ESLint了。</p>
<p>正如ESLint官网这样定义ESLint：</p>
<blockquote>
<p>ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project. </p>
</blockquote>
<p><strong>ESLint 的设计思想就是高度可配置，在ESLint中你可以开关每一条规则，你可以使用最基本的语法检测，或者结合自定义的规则来使得ESLint完美运行在你的项目中。</strong></p>
<a id="more"></a>
<!-- tags: [Eslint, 转载]
category: 转载 -->
<h2 id="怎么使用ESLint？"><a href="#怎么使用ESLint？" class="headerlink" title="怎么使用ESLint？"></a>怎么使用ESLint？</h2><h3 id="ESLint的配置"><a href="#ESLint的配置" class="headerlink" title="ESLint的配置"></a>ESLint的配置</h3><h4 id="ESLint配置的方法"><a href="#ESLint配置的方法" class="headerlink" title="ESLint配置的方法"></a>ESLint配置的方法</h4><p>ESLint主要有两种配置方法:</p>
<p> 1）Configuration Comment： 通过在所有的JS文件的JavaScript 注释中写ESLint配置信息。</p>
<p> 2）Configuration Files: 通过一份配置文件，来对ESLint进行基本配置，配置文件可以是JavaScript、JSON、YAML中任意一种格式。如果是用过<code>.eslintrc</code> 或者在<code>package.son</code> 文件中的eslintConfig属性内进行配置，那么ESLint就能够自动的检测到这两个文件中的配置信息，如果是其他文件或文件名，就需要在命令行中指定特定的配置文件。</p>
<h4 id="ESLint配置的主要内容"><a href="#ESLint配置的主要内容" class="headerlink" title="ESLint配置的主要内容"></a>ESLint配置的主要内容</h4><p> 1）<strong>Environments：</strong> 定义我们脚本的运行环境，配置这项的一个主要原因就是不同的运行环境都会有预先定义的不同的global variables。</p>
<p> 2）<strong>Globals</strong>：配置脚本运行过程中附件的全局变量（global variables）；</p>
<p> 3）<strong>Rules</strong>： 在我们的项目中，需要配置的代码规则，并且指定每一条规则的警告级别（error level）。比如说<code>no-var: 2</code> 这条规则，ESLint在进行代码检测时，如果我们JavaScript代码中使用了<code>var</code>申明变量，那么就会报错，其中<code>2</code> 是一个警告等级，在后面会介绍到。</p>
<p> <strong> 下面是<code>.eslintrc</code> 配置文件中一些具体配置项的详细解释 </strong></p>
<p> <strong>本文档实例，默认使用的是第二种配置方法，也就是通过配置文件来进行配置，并且使用的是<code>.eslintrc</code>文件。</strong></p>
<p> 1）Specifying Language Options</p>
<p> ESLint 允许使用者指定ESLint支持的的JavaScript 语法。在默认情况下，ESLint仅支持ECMAScript 5 的语法，同时在配置文件中，可以对特定的rule进行重写（或覆盖），来使ESLint支持ECMAScript 2016 或者是 JSX语法格式。</p>
<p> 这部分的配置是在<code>.eslintrc</code>文件中的ecmaFeatures 属性中进行配置。可配置项如下：</p>
<p> <code>arrowFunctions</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-arrow-functions" target="_blank" rel="external">arrow functions</a></p>
<p> <code>binaryLiterals</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-octal-and-binary-literals" target="_blank" rel="external">binary literals</a></p>
<p> <code>blockBindings</code> - enable <code>let</code> and <code>const</code> (aka <a href="https://leanpub.com/understandinges6/read#leanpub-auto-block-bindings" target="_blank" rel="external">block bindings</a>)</p>
<p> <code>classes</code> - enable classes</p>
<p> <code>defaultParams</code> - enable <a href="https://leanpub.com/understandinges6/read/#leanpub-auto-default-parameters" target="_blank" rel="external">default function parameters</a></p>
<p> <code>destructuring</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-destructuring-assignment" target="_blank" rel="external">destructuring</a></p>
<p> <code>forOf</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-iterables-and-for-of" target="_blank" rel="external"><code>for-of</code> loops</a></p>
<p> <code>generators</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-generators" target="_blank" rel="external">generators</a></p>
<p> <code>modules</code> - enable modules and global strict mode</p>
<p> <code>objectLiteralComputedProperties</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-computed-property-names" target="_blank" rel="external">computed object literal property names</a></p>
<p> <code>objectLiteralDuplicateProperties</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-duplicate-object-literal-properties" target="_blank" rel="external">duplicate object literal properties</a> in strict mode</p>
<p> <code>objectLiteralShorthandMethods</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-method-initializer-shorthand" target="_blank" rel="external">object literal shorthand methods</a></p>
<p> <code>objectLiteralShorthandProperties</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-property-initializer-shorthand" target="_blank" rel="external">object literal shorthand properties</a></p>
<p> <code>octalLiterals</code> - enable <a href="https://leanpub.com/understandinges6/read#leanpub-auto-octal-and-binary-literals" target="_blank" rel="external">octal literals</a></p>
<p> <code>regexUFlag</code> - enable the <a href="https://leanpub.com/understandinges6/read#leanpub-auto-the-regular-expression-u-flag" target="_blank" rel="external">regular expression <code>u</code> flag</a></p>
<p> <code>regexYFlag</code> - enable the <a href="https://leanpub.com/understandinges6/read#leanpub-auto-the-regular-expression-y-flag" target="_blank" rel="external">regular expression <code>y</code> flag</a></p>
<p> <code>restParams</code> - enable the <a href="https://leanpub.com/understandinges6/read#leanpub-auto-rest-parameters" target="_blank" rel="external">rest parameters</a></p>
<p> <code>spread</code> - enable the <a href="https://leanpub.com/understandinges6/read#leanpub-auto-the-spread-operator" target="_blank" rel="external">spread operator</a> for arrays</p>
<p> <code>superInFunctions</code> - enable <code>super</code> references inside of functions</p>
<p> <code>templateStrings</code> - enable <a href="https://leanpub.com/understandinges6/read/#leanpub-auto-template-strings" target="_blank" rel="external">template strings</a></p>
<p> <code>unicodeCodePointEscapes</code> - enable <a href="https://leanpub.com/understandinges6/read/#leanpub-auto-escaping-non-bmp-characters" target="_blank" rel="external">code point escapes</a></p>
<p> <code>globalReturn</code> - allow <code>return</code> statements in the global scope</p>
<p> <code>jsx</code> - enable <a href="http://facebook.github.io/jsx/" target="_blank" rel="external">JSX</a></p>
<p> <code>experimentalObjectRestSpread</code> - enable support for the experimental <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="external">object rest/spread properties</a> </p>
<p> 下面是一个在<code>.eslintrc</code>配置文件中的栗子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="string">"ecmaFeatures"</span>: {</div><div class="line"> <span class="string">"blockBindings"</span>: <span class="literal">true</span>,</div><div class="line"> <span class="string">"forOf"</span>: <span class="literal">true</span>,</div><div class="line"> <span class="string">"jsx"</span>: <span class="literal">true</span></div><div class="line"> },</div><div class="line"> <span class="string">"rules"</span>: {</div><div class="line"> <span class="string">"semi"</span>: <span class="number">2</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> or (YAML格式)</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="attr">ecmaFeatures:</span></div><div class="line"><span class="attr"> blockBindings:</span> <span class="literal">true</span></div><div class="line"><span class="attr"> forOf:</span> <span class="literal">true</span></div><div class="line"><span class="attr"> jsx:</span> <span class="literal">true</span></div><div class="line"><span class="attr">rules:</span></div><div class="line"><span class="attr"> semi:</span> <span class="number">2</span></div></pre></td></tr></table></figure>
<p> <strong>上面的Language配置，基本都是ECMAScript2015的新语法，或者React的JSX</strong>。其实在配置Environment的时候，配置<code>es6: true</code> 其实就可以使用ECMAScript 2015的大部分新特性了，除了modules，也就是说，在ecmaFeatures的配置中，我们如果需要使用ECMAScript2015新特性，我们只需要如下配置：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="attr">ecmaFeatures:</span></div><div class="line"><span class="attr"> modules:</span> <span class="literal">true</span></div><div class="line"><span class="attr"> experimentalObjectRestSpread:</span> <span class="literal">true</span></div></pre></td></tr></table></figure>
<p> 2）解析器的配置（Specifying Parser）</p>
<p> ESLint默认是采用的Espree解析器，你也可以自己指定其他的解析器被配置文件所用，但是自己指定的解析器需要满足如下要求：</p>
<p> （1）Parser 必须通过npm 安装到本地，不需要全局安装。</p>
<p> （2）Parser必须带有Esprima兼容的接口，也就是说该Parser需要暴露一个<code>parse()</code> 方法。</p>
<p> （3）It must produce Esprima-compatible AST and token objects.</p>
<p> 指定Parser就是在<code>.eslintrc</code>文件中<code>parser</code>项进行配置，举个栗子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="string">"parser"</span>: <span class="string">"esprima"</span>,</div><div class="line"> <span class="string">"rules"</span>: {</div><div class="line"> <span class="string">"semi"</span>: <span class="number">2</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 下面列举一些ESLint兼容的Parsers。</p>
<p> <a href="https://npmjs.com/package/esprima" target="_blank" rel="external">Esprima</a></p>
<p> <a href="https://npmjs.com/package/esprima-fb" target="_blank" rel="external">Esprima-FB</a> - Facebook’s fork of Esprima that includes their proprietary syntax additions.</p>
<p> <a href="https://npmjs.com/package/babel-eslint" target="_blank" rel="external">Babel-ESLint</a> - A wrapper around the <a href="http://babeljs.io/" target="_blank" rel="external">Babel</a> parser that makes it compatible with ESLint.</p>
<p> <strong>如果在项目中使用了Babel来对ES6代码进行编译，个人建议使用Babel-ESLint Parser。</strong></p>
<p> <strong>当我们使用一个特定的Parser的时候，ecmaFeatures仍然是需要在配置文件中指定的，但是我们指定的Parser不一定需要使用到ecmaFeatures中定义使用的特性。</strong></p>
<p> 3）ESLint运行环境的配置（Specifying Environments）</p>
<p> <code>browser</code> - browser global variables.</p>
<p> <code>node</code> - Node.js global variables and Node.js scoping.</p>
<p> <code>commonjs</code> - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).</p>
<p> <code>worker</code> - web workers global variables.</p>
<p> <code>amd</code> - defines <code>require()</code> and <code>define()</code> as global variables as per the <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank" rel="external">amd</a> spec.</p>
<p> <code>mocha</code> - adds all of the Mocha testing global variables.</p>
<p> <code>jasmine</code> - adds all of the Jasmine testing global variables for version 1.3 and 2.0.</p>
<p> <code>jest</code> - Jest global variables.</p>
<p> <code>phantomjs</code> - PhantomJS global variables.</p>
<p> <code>protractor</code> - Protractor global variables.</p>
<p> <code>qunit</code> - QUnit global variables.</p>
<p> <code>jquery</code> - jQuery global variables.</p>
<p> <code>prototypejs</code> - Prototype.js global variables.</p>
<p> <code>shelljs</code> - ShellJS global variables.</p>
<p> <code>meteor</code> - Meteor global variables.</p>
<p> <code>mongo</code> - MongoDB global variables.</p>
<p> <code>applescript</code> - AppleScript global variables.</p>
<p> <code>nashorn</code> - Java 8 Nashorn global variables.</p>
<p> <code>serviceworker</code> - Service Worker global variables.</p>
<p> <code>embertest</code> - Ember test helper globals.</p>
<p> <code>webextensions</code> - WebExtensions globals.</p>
<p> <code>es6</code> - enable all ECMAScript 6 features except for modules.</p>
<p> 上面枚举了JavaScript可能运行到的一些环境，当然我们的项目不可能运行在每个环境中，因此不需要全部都写上，同时，JavaScript也不可能同时在多个环境中运行，因此，配置环境的时候可以配置多个使用环境，ESLint会更具具体代码运行环境来决定使用的哪种环境。</p>
<p> 下面举个栗子:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">"env": {</div><div class="line"> browser: true</div><div class="line"> node: true</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 上面的例子说明，我们的代码可能会运行在浏览器环境、node环境或es6环境。</p>
<p> 4）指定额外全局变量（Specifying Globals）</p>
<p> <code>no-undef</code>规则在我们使用没有在同一文件中定义的变量的时候会报错，当我们使用了全局变量的时候，我们就有必要对额外的全局变量进行配置，避免<code>no-undef</code>误会。我们可以通过代码注释或者配置文件来进行此项配置。举个栗子：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">"globals":{</div><div class="line"> var1: true</div><div class="line"> var2: false</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 5) 引入插件（Specifying Plugins）</p>
<p> ESLint一个优越的地方就是可以使用第三方插件，在使用插件之前，首先需要通过npm安装需要使用的插件。通过<code>plugins</code> 键名来指定插件，插件名前面的前缀<code>eslint-plugin-</code> 可以省略：举个栗子：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="attr">plugins:</span></div><div class="line"><span class="bullet"> -</span> plugin1</div><div class="line"><span class="bullet"> -</span> eslint-plugin-plugin2</div></pre></td></tr></table></figure>
<p> <strong>注意：全局安装的ESLint，插件也需要全局安装，本地安装的ESLint，插件既可以本地安装也可以全局安装。</strong></p>
<p> 5）配置Rules （Configuring Rules）</p>
<p> <strong>重要的东西往往放在最后，配置Rules也就是整个配置文件的核心部分。</strong></p>
<p> 在ESLint中拥有大量的rules（后面将不再对rules进行翻译），你可以通过在javascript文件中注释或者特定的配置文件来指定和修改项目中需要rules。在进行一条rule配置时，我们需要设置rule ID为如下值：</p>
<p> 0 - turn the rule off //关掉此条规则</p>
<p> 1 - turn the rule on as a warning (doesn’t affect exit code) // 把这条规则指定为warning</p>
<p> 2 - turn the rule on as an error (exit code is 1 when triggered) //把这条rule指定为error</p>
<p> 同时对于某些rule，在制定上面警告级别的时候，还可以指定其他的选项。举个栗子：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="attr">rules:</span></div><div class="line"><span class="attr"> eqeqeq:</span> <span class="number">0</span></div><div class="line"><span class="attr"> curly:</span> <span class="number">2</span></div><div class="line"><span class="attr"> quotes:</span></div><div class="line"><span class="bullet"> -</span> <span class="number">2</span></div><div class="line"><span class="bullet"> -</span> <span class="string">"double"</span></div></pre></td></tr></table></figure>
<p> 如果一条rule是通过plugin引入的，那么在配置此条rule的时候需要在rule ID前面加plugin 名和 <code>/</code> 举个栗子：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="attr">plugins:</span></div><div class="line"><span class="bullet"> -</span> plugin1</div><div class="line"><span class="attr">rules:</span></div><div class="line"><span class="attr"> eqeqeq:</span> <span class="number">0</span></div><div class="line"><span class="attr"> curly:</span> <span class="number">2</span></div><div class="line"><span class="attr"> quotes:</span></div><div class="line"><span class="bullet"> -</span> <span class="number">2</span></div><div class="line"><span class="bullet"> -</span> <span class="string">"double"</span></div><div class="line"> plugin1/rule1: <span class="number">2</span></div></pre></td></tr></table></figure>
<p> <strong>注意：在制定plugin中的rule时，我们需要把plugin的前缀<code>aslant-plugin-</code> 去掉。</strong></p>
<p> <strong>所有的rules，其默认值设置为2.可以通过设置rule为1或者0来对其进行警告降级。</strong></p>
<p> <strong>关于具体的每一条rule的解释和使用，我会另外整理一份详尽文档，这儿就不在赘述</strong></p>
<p> 6）配置文件的格式问题</p>
<p> ESLint 支持多种配置文件格式</p>
<p> <strong>JavaScript</strong> - use <code>.eslintrc.js</code> and export an object containing your configuration.</p>
<p> <strong>YAML</strong> - use <code>.eslintrc.yaml</code> or <code>.eslintrc.yml</code> to define the configuration structure.</p>
<p> <strong>JSON</strong> - use <code>.eslintrc.json</code> to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.</p>
<p> <strong>package.json</strong> - create an <code>eslintConfig</code> property in your <code>package.json</code> file and define your configuration there.</p>
<p> <strong>Deprecated</strong> - use <code>.eslintrc</code>, which can be either JSON or YAML.</p>
<p> **如果我们的项目中有多个配置文件，同时又有<code>.eslintrc</code> 文件，ESLint会只使用<code>.eslintrc</code>文件。配置文件的优先级如下（下面的优先级最高，个人建议就在<code>.eslintrc</code>中配置就可以了）：</p>
<p> <code>.eslintrc.js</code></p>
<p> <code>.eslintrc.yaml</code></p>
<p> <code>.eslintrc.yml</code></p>
<p> <code>.eslintrc.json</code></p>
<p> <code>.eslintrc</code></p>
<p> 7）配置文件的扩展（Extending Configuration Files）</p>
<p> 如果需要扩展一个特定的配置文件，只需要在配置文件中增加extends项就可以了，引用的路径既可以是相对路径也可以是绝对路径。举个栗子：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> "extends": "./node_modules/coding-standard/.eslintrc",</div><div class="line"></div><div class="line"> "rules": {</div><div class="line"> // Override any settings from the "parent" configuration</div><div class="line"> "eqeqeq": 1</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> <code>extends</code> 也可以接受一个数组，数组后面的文件会重写数组前面文件中的rule，举个栗子：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> "extends": [</div><div class="line"> "./node_modules/coding-standard/eslintDefaults.js",</div><div class="line"> // Override eslintDefaults.js</div><div class="line"> "./node_modules/coding-standard/.eslintrc-es6",</div><div class="line"> // Override .eslintrc-es6</div><div class="line"> "./node_modules/coding-standard/.eslintrc-jsx",</div><div class="line"> ],</div><div class="line"></div><div class="line"> "rules": {</div><div class="line"> // Override any settings from the "parent" configuration</div><div class="line"> "eqeqeq": 1</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> <code>extends</code> 亦可以用来引用一些在github上面共享的配置包，首先需要通过npm安装配置包文件，其次就可以像如下栗子引用了：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="string">"extends"</span>: <span class="string">"eslint-config-myrules"</span>,</div><div class="line"></div><div class="line"> <span class="string">"rules"</span>: {</div><div class="line"> <span class="comment">// Override any settings from the "parent" configuration</span></div><div class="line"> <span class="string">"eqeqeq"</span>: <span class="number">1</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> <strong>在扩展shareable的配置时，<code>aslant-config-</code> 也可以去掉，</strong>ESLint会自己帮我们加上的，如果想了解插件和Shareable Configs具体工作原理，请点击 <a href="http://eslint.org/docs/developer-guide/shareable-configs" target="_blank" rel="external">Shareable Configs</a> 。</p>
<p> 8）怎么在配置文件中写注释</p>
<p> 可以使用JavaScript或者YAML的代码注释风格，举个栗子：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> "env": {</div><div class="line"> "browser": true</div><div class="line"> },</div><div class="line"> "rules": {</div><div class="line"> // Override our default settings just for this directory</div><div class="line"> "eqeqeq": 1,</div><div class="line"> "strict": 0</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 9) 怎么制定ESLint忽略检测的文件或路径</p>
<p> 我们可以通过生成一个<code>.eslintignore</code>文件来告诉ESLint我们需要忽略检测哪些文件或者文件夹中的所有文件。在<code>.eslintignore</code>文件中，每一行就是表示需要ESLint忽略文件的路径，举个栗子：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">**/*.js</div></pre></td></tr></table></figure>
<p> 当ESLint运行的时候，它会执行代码规范检测之前查找当前工作文件夹中的<code>.eslintignore</code>文件，当该文件找到后，ESLint运行时就会忽略该文件中的制定文件或文件夹，一个文件夹下只能够有一个<code>.eslintignore</code>文件。</p>
<p> 在<code>.eslintignore</code>文件中是使用<code>minimatch</code>来进行匹配的，因此一些如下特性可以使用：</p>
<p> （1）以<code>#</code> 开始的一行会被视为注释，不会对忽略匹配产生影响。</p>
<p> （2）以 <code>!</code> 开始的一行是negated patterns。也就是说在我们首先忽略了某个文件夹中的所有文件后，我们又想ESLint检测该文件夹中的某些文件时就可以使用该特性。举个栗子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"># Ignore built files except build/index.js</div><div class="line">build/</div><div class="line">!build/index.js</div></pre></td></tr></table></figure>
<p> 在上面的栗子中，我们依然会对build/index.js文件进行ESLint检测。</p>
<p> （3）大括号语法可以在一个匹配中制定多个文件。举个栗子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"># Ignore files compiled from TypeScript and CoffeeScript</div><div class="line">**/*.{ts,coffee}.js</div></pre></td></tr></table></figure>
<p> </p>
<h3 id="ESLint的使用方法"><a href="#ESLint的使用方法" class="headerlink" title="ESLint的使用方法"></a>ESLint的使用方法</h3><p>我们配置好了文件，怎么去使用配置文件呢。也就是说how to use the Configuration Files？</p>
<p>有两种方法使用到配置文件，第一种是通过命令行来使用ESLint来检测我们的代码是否规范，第二种是在编辑器内实时检测代码规范。</p>
<p>1）命令行检测</p>
<p>如果我们不是使用的<code>.eslintrc</code>或<code>package.son</code>文件来配置ESLint，那么我们就需要在命令行中指定我们的配置文件，运行配置文件使用 <code>-c</code> 。举个栗子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">eslint -c myconfig.json myfiletotest.js</div></pre></td></tr></table></figure>
<p>当然了，如果我们使用的是<code>.eslintrc</code>或<code>package.son</code>文件，那么在运行命令行的时候也就不用指定配置文件了，因为ESLint会自动查找项目中是否包含这两个文件，然后运行lint。这个有个和查找npm包一样的规则，首先会在当前文件夹中查找是否有<code>.eslintrc</code> 文件，如果没有找到，再向上一级文件夹中查找，知道root directory。这种查找<code>.eslintrc</code> 的方式也就给予了我们在一个项目中使用多份<code>.eslintrc</code>文件的可能，也就是在一个项目中我们可以使用多个代码规范。</p>
<p>当然我们还可以再简化下我们的工作，就是在<code>package.json</code>文件中，添加如下代码：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="attr">"scripts"</span>:{</div><div class="line"> <span class="attr">"lint"</span>: <span class="string">"eslint **/*.js"</span> //其中**/*.js是我们需要检测的文件</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>这样这样我们就可以直接在命令行中执行：</p>
<blockquote>
<p>npm run lint</p>
</blockquote>
<p>来对我们的代码进行代码规范检测了。</p>
<p>2）编辑器内实时检测代码规范</p>
<p>我现在只是在Sublime Text 3中进行了配置，由于大家使用的编辑器各不相同，这儿也就只简单说下在SubLime Text3中ESLint怎么配置。</p>
<p>（1）全局安装<code>aslant</code>和 <code>babel-eslint</code> ，后者是Parser</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install eslint babel-eslint -g</div></pre></td></tr></table></figure>
<p> (2) 在sublime Text3,通过package control安装aslant所需包。包括SublimeLinter和SublimeLinter-contrib-eslint 。</p>
<p><code>command</code> + <code>shift</code> + <code>p</code> 打开包管理搜索框，输入Package Control：Install Package。等Install Package启动完毕，就可以搜索所需的包了，然后点击所需包进行安装。</p>
<p>（3）在项目中生成<code>.eslintrc</code>配置文件，配置env、rules等。里面的parser指令我们安装的<code>babel-eslint</code>.举个栗子：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="attr">env:</span></div><div class="line"><span class="attr"> browser:</span> <span class="literal">true</span></div><div class="line"><span class="attr"> es6:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">ecmaFeatures:</span></div><div class="line"><span class="attr"> modules:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">parser:</span> <span class="string">"babel-eslint"</span></div><div class="line"><span class="comment">#never mind ，just example！！！</span></div><div class="line"><span class="attr">rules:</span></div><div class="line"><span class="attr"> no-empty:</span> <span class="number">2</span></div><div class="line"><span class="attr"> comma-dangle:</span> <span class="number">2</span></div><div class="line"><span class="attr"> no-native-reassign:</span> <span class="number">2</span></div></pre></td></tr></table></figure>
<p>当上面所有步骤都完成后，就可以在SubLime Text中快乐的Coding了，并且如果代码规范和<code>.eslintrc</code>冲突的话，Sublime Text会自动用红圈高亮出错代码。</p>
<p><strong>若果上面步骤完成以后，还是不能够高亮出错代码，可以再在本地也安装eslint和babel-eslint。</strong></p>
]]></content>
</entry>
<entry>
<title><![CDATA[【转】Eslint 配置及规则说明]]></title>
<url>https://relign.github.io/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/eslint/</url>
<content type="html"><![CDATA[<blockquote>
<p>从 Jocs 罗冉大神的<a href="https://github.com/Jocs" target="_blank" rel="external">github</a>中翻阅Eslint的这几篇翻译文档,觉得相当不错,遂收录</p>
</blockquote>
<h3 id="项目中包含"><a href="#项目中包含" class="headerlink" title="项目中包含"></a>项目中包含</h3><p><strong>Rules：</strong>该文件夹中包含了ESLint Rules的中文翻译（暂不包含v2.0.0新增Rules）。</p>
<p><strong>Configration：</strong> 该文件夹内包含一个ESLint配置说明文件。</p>
<p><strong>.eslintrc</strong>: 该文件是可以是你项目中有且仅有ESLint的配置文件，不包含规则简要解释。</p>
<p><strong>eslintrc.json</strong>： 该文件可以是你项目中有且仅有ESLint的配置文件，包含简要的规则解释。</p>
<p><strong>Migrating-to-v2.0.0</strong>: ESLint迁移至v2.0.0手册，和Rules和Configration相关部分进行了翻译。</p>
<h3 id="配置文件使用说明"><a href="#配置文件使用说明" class="headerlink" title="配置文件使用说明"></a>配置文件使用说明</h3><h4 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h4><p>在<code>package.json</code>文件中添加如下依赖（如果没有<code>package.son</code>文件需首先通过<code>npm init</code> 创建<code>package.son</code> 文件）：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">"devDependencies": {</div><div class="line"> "babel-core": "^6.5.2",</div><div class="line"> "babel-eslint": "^4.1.8",</div><div class="line"> "eslint": "^2.1.0",</div><div class="line"> "eslint-plugin-promise": "^1.0.8",</div><div class="line"> "eslint-plugin-standard": "^1.3.2"</div><div class="line"> }</div></pre></td></tr></table></figure>
<a id="more"></a>
<p>运行如下命令：</p>
<blockquote>
<p>npm install</p>
</blockquote>
<h4 id="将文件夹中的eslintrc-json文件放置在项目根目录"><a href="#将文件夹中的eslintrc-json文件放置在项目根目录" class="headerlink" title="将文件夹中的eslintrc.json文件放置在项目根目录"></a>将文件夹中的eslintrc.json文件放置在项目根目录</h4><p>并将<code>eslintrc.json</code>重命名为<code>.eslintrc</code>(或者直接使用文件夹中的<code>.eslintrc</code>文件)</p>
<h4 id="修改配置文件"><a href="#修改配置文件" class="headerlink" title="修改配置文件"></a>修改配置文件</h4><p>根据自己项目需要，在配置文件中<code>globals</code>配置项中添加项目所需全局变量：举个栗子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="string">"globals"</span>: {</div><div class="line"> <span class="string">"document"</span>: <span class="literal">true</span>,</div><div class="line"> <span class="string">"navigator"</span>: <span class="literal">true</span>,</div><div class="line"> <span class="string">"window"</span>: <span class="literal">true</span>,</div><div class="line"> <span class="string">"angular"</span>:<span class="literal">true</span> <span class="comment">//添加项目所需没有申明的全局变量</span></div><div class="line"> },</div></pre></td></tr></table></figure>
<h4 id="让ESLint运行起来"><a href="#让ESLint运行起来" class="headerlink" title="让ESLint运行起来"></a>让ESLint运行起来</h4><p>修改<code>package.json</code>文件。在<code>script</code> 配置项中添加如下代码：举个栗子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="string">"scripts"</span>: {</div><div class="line"> <span class="string">"lint"</span>: <span class="string">"eslint app.jsx test"</span> <span class="comment">//其中app.jsx test需要替换成你项目需要检测的文件或文件夹</span></div><div class="line">},</div></pre></td></tr></table></figure>
<p>命令行运行如下代码：</p>
<blockquote>
<p>npm run lint</p>
</blockquote>
<p>好了，现在就可以在终端看检测结果了。</p>
]]></content>
</entry>
<entry>
<title><![CDATA[利用EditorConfig定义代码格式,统一代码风格]]></title>
<url>https://relign.github.io/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/editor-config/</url>
<content type="html"><![CDATA[<blockquote>
<p>在项目开发过程中,不同开发人员会使用不同的编辑器,常见的如:WebStorm,Atom,Sublime等等.不同编辑器对于缩进风格,默认的编码格式以及空白字符的设置等各有风格,因此在项目中做代码统一规范让开发人员尤为痛苦. </p>
</blockquote>
<h3 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h3><p><strong>EditorConfig</strong> 帮助开发人员统一和维护不同编辑器之间的代码风格,有助于项目做<code>Eslint</code>等的代码检查和代码规范的统一.<code>EditorConfig</code>通过在项目中构建一个配置文件来让编辑器插件进行格式化代码.<code>EditorConfig</code>配置文件简单易懂，并且能够很好的和版本控制器协同工作. </p>
<blockquote>
<p>版本控制系统(Version Control Systems ,简称VCS)也称为源代码控制系统,它是跟踪并存储系统各对象源代码及文档的开发历史和变更资料,并提供了系统故障恢复及开发进程管理的功能. </p>
</blockquote>
<a id="more"></a>
<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><p>在下面的例子中,<code>.editorconfig</code> 配置文件设置了end-of-line（行末换行符选择）和indentation styles（代码缩进风格),该配置文件将规范项目中Html,css,SCSS和JavaScript等文件的代码风格.</p>
<pre><code class="ruby"><span class="comment"># EditorConfig is awesome: http://EditorConfig.org</span>
<span class="comment"># top-most EditorConfig file</span>
<span class="comment"># 最顶层的配置文件</span>
root = <span class="literal">true</span>
<span class="comment"># Unix-style newlines with a newline ending every file</span>
<span class="comment"># 行末应该采用什么符号来进行换行</span>
[*]
end_of_line = lf
<span class="comment"># 文件以空白行结尾</span>
insert_final_newline = <span class="literal">true</span>
<span class="comment"># Matches multiple files with brace expansion notation</span>
<span class="comment"># Set default charset</span>
<span class="comment"># 设置默认的编码格式</span>
[*]
charset = utf-<span class="number">8</span>
<span class="comment"># 4 space indentation</span>
[*.{js,html}]
<span class="comment"># 缩进样式是 tab 还是 space</span>
indent_style = space
<span class="comment"># 每次缩进相当于多少列</span>
indent_size = <span class="number">4</span>
<span class="comment"># 去除代码行末的任意空白字符</span>
trim_trailing_whitespace = <span class="literal">true</span>
<span class="comment"># Indentation override for all JS under lib directory</span>
[*.scss]
indent_style = space
indent_size = <span class="number">2</span>
trim_trailing_whitespace = <span class="literal">true</span>
<span class="comment"># Matches the exact files either package.json or .travis.yml</span>
[{package.json,.travis.yml}]
indent_style = space
indent_size = <span class="number">2</span>
</code></pre>
<p>这里给出一些项目中使用<code>EditorConfig</code>的<a href="https://github.com/editorconfig/editorconfig/wiki/Projects-Using-EditorConfig" target="_blank" rel="external">实例</a>. </p>
<h3 id="配置文件详解"><a href="#配置文件详解" class="headerlink" title="配置文件详解"></a>配置文件详解</h3><blockquote>
<p>转载</p>
</blockquote>
<p>当打开一个文件时,<code>EditorConfig</code>插件会遍历文件的目录和其每一级父目录查找<code>.editorconfig</code>文件,直到有一个配置文件<code>root=true</code>.</p>
<p><code>EditorConfig</code>配置文件从上往下读取,并且路径最近的文件最后被读取.匹配的配置属性按照属性应用在代码上,所以最接近代码文件的属性优先级最高.</p>
<p><strong>Windows 用户:</strong> 在资源管理器创建<code>.editorconfig</code>文件,可以先创建<code>.editorconfig.</code>文件,系统会自动重名为<code>.editorconfig</code>.</p>
<h3 id="文件格式详情"><a href="#文件格式详情" class="headerlink" title="文件格式详情"></a>文件格式详情</h3><p><code>EditorConfig</code>文件使用INI格式(<em>译注：请参考维基百科</em>),目的是可以与<a href="https://docs.python.org/2/library/configparser.html" target="_blank" rel="external">Python ConfigParser Library</a>兼容,但是允许在分段名（译注：原文是section names）中使用“and”.分段名是全局的文件路径,格式类似于<a href="http://manpages.ubuntu.com/manpages/intrepid/man5/gitignore.5.html#contenttoc2" target="_blank" rel="external">gitignore</a>。斜杠(<code>/</code>)作为路径分隔符，<code>#</code>或者<code>;</code>作为注释。注释应该单独占一行。<code>EditorConfig</code>文件使用<code>UTF-8</code>格式、<code>CRLF</code>或<code>LF</code>作为换行符。</p>
<p>下面将详细解释文件路径匹配模式和EditorConfig 目前支持的配置属性。</p>
<h4 id="Wildcard-Patterns"><a href="#Wildcard-Patterns" class="headerlink" title="Wildcard Patterns"></a>Wildcard Patterns</h4><table>
<thead>
<tr>
<th>*</th>
<th style="text-align:left"><strong>除路径分隔符<code>\</code>外匹配所有字符串字符</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>**</td>
<td style="text-align:left"><strong>除路径分隔符<code>\</code>外匹配所有字符串字符</strong></td>
</tr>
<tr>
<td>?</td>
<td style="text-align:left"><strong>匹配所有单个字符</strong></td>
</tr>
<tr>
<td>[name]</td>
<td style="text-align:left"><strong>匹配name字符</strong></td>
</tr>
<tr>
<td>[!name]</td>
<td style="text-align:left"><strong>匹配非name字符</strong></td>
</tr>
<tr>
<td>{s1, s2, s3}</td>
<td style="text-align:left"><strong>匹配任意给定的字符串（通过逗号分隔）</strong></td>
</tr>
</tbody>
</table>
<p>特殊字符需要通过转移符进行转义，使得特殊字符不会被当做通配符解析。</p>
<p><strong>EditorConfig支持的配置属性</strong></p>
<p><strong>注意</strong>：并不是所有的编辑器插件都支持以下全部配置属性，<a href="https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties" target="_blank" rel="external">项目Wiki</a>上有一份兼容配置属性的表格供参考。</p>
<ul>
<li><p><code>indent_style</code>: set to tab or space to use hard tabs or soft tabs respectively.</p>
<p>缩进样式：可以设置为<code>tab</code>和<code>space</code>两个值。</p>
</li>
<li><p><code>indent_size</code>: a whole number defining the number of columns used for each indentation level and the width of soft tabs (when supported). When set to tab, the value of <strong>tab_width</strong> (if specified) will be used.</p>
<p>当缩进样式设置为<code>space</code>时，<code>indent_size</code>用来设置每次缩进相当于多少列。</p>
</li>
<li><p><code>tab_width</code>: a whole number defining the number of columns used to represent a tab character. This defaults to the value of <strong>indent_size</strong> and doesn’t usually need to be specified.</p>
<p>当缩进设置为<code>tab</code>时，<code>tab_width</code> 用来设置每次缩进相当于多少列代码。</p>
</li>
<li><p><code>end_of_line</code>: set to lf, cr, or crlf to control how line breaks are represented.</p>
<p><code>end_of_line</code>用来定义行末采用什么符号来进行换行，可以的选择包括<code>lf</code> <code>cr</code> 和<code>crlf</code>.</p>
</li>
<li><p><code>charset</code>: set to latin1, utf-8, utf-8-bom, utf-16beor utf-16le to control the character set. Use of utf-8-bom is discouraged.</p>
<p>编码格式，支持<code>latin1</code>、<code>utf-8</code>、<code>utf-8-bom</code>、<code>utf-16be</code>和<code>utf-16le</code>，不建议使用<code>uft-8-bom</code>。</p>
</li>
<li><p><code>trim_trailing_whitespace</code>: set to true to remove any whitespace characters preceding newline characters and false to ensure it doesn’t.</p>
<p>设为<code>true</code>表示会除去代码行末的任意空白字符，<code>false</code>反之。</p>
</li>
<li><p><code>insert_final_newline</code>: set to true ensure file ends with a newline when saving and false to ensure it doesn’t.</p>
<p>设为<code>true</code>表明使文件以一个空白行结尾，<code>false</code>反之。</p>
</li>
<li><p><code>root</code>: special property that should be specified at the top of the file outside of any sections. Set to true to stop <code>.editorconfig</code> files search on current file.</p>
<p>表明是最顶层的配置文件，发现设为<code>true</code>时，才会停止查找<code>.editorconfig</code>文件。</p>
</li>
</ul>
<p>目前所有的属性名和属性值都是大小写不敏感的。编译时都会将其转为小写。通常，如果没有明确指定某个属性，则会使用编辑器的配置，而<code>EditorConfig</code>不会处理。</p>
<p>推荐不要指定某些<code>EditorConfig</code>属性。比如，<code>tab_width</code>不需要特别指定，除非它与<code>indent_size</code>不同。同样的，当<code>indent_style</code>设为<code>tab</code>时，不需要配置<code>indent_size</code>，这样才方便阅读者使用他们习惯的缩进格式。另外，如果某些属性并没有规范化（比如<code>end_of_line</code>），就最好不要设置它。</p>
<h3 id="不需要插件的编辑器"><a href="#不需要插件的编辑器" class="headerlink" title="不需要插件的编辑器"></a>不需要插件的编辑器</h3><ol>
<li>BBEdit</li>
<li>C lion</li>
<li>GitHub</li>
<li>InfelliJIDEA</li>
<li>RubyMine</li>
<li>Source Lair</li>
<li>WebStorm</li>
</ol>
<h3 id="需要下载插件的编辑器"><a href="#需要下载插件的编辑器" class="headerlink" title="需要下载插件的编辑器"></a>需要下载插件的编辑器</h3><ol>
<li>AppCode</li>
<li>ATOM</li>
<li>Brackets</li>
<li>Coda</li>
<li>Code::Blocks</li>
<li>eclipse</li>
<li>Emacs</li>
<li>Geany</li>
<li>gedit</li>
<li>jEdit</li>
<li>Komodo</li>
<li>NetBeans</li>
<li>Nodepad++</li>
<li>PhpStorm</li>
<li>PyCharm</li>
<li>Sublime Text</li>
<li>textmate</li>
<li>Vim</li>
<li>Visual Stuido</li>
<li>Visual Studio Code</li>
<li>Xcode</li>
</ol>
<p><strong>举个例子</strong></p>
<p><strong>Sublime Text</strong></p>
<p>如果要安装Sublime Text插件，直接在Package Control中搜索<code>EditorConfig</code>就行。</p>
<p><strong>WebStorm</strong></p>
<p>在Setting–>Plugins–>Browse JetBrains Plugins里搜索<code>EditorConfig</code>即可。</p>
<p><code>IntellijIDEA</code>、<code>PhpStorm</code>、<code>PyCharm</code>等应该类似。</p>
<p><em>注：</em>从9.X版本开始，<code>WebStorm</code>原生就内置了<code>EditorConfig</code>，不需要装任何插件。</p>
<p><em>译注：</em>支持的编辑器/IDE很多，使用也都很简单，大家自己去<a href="http://editorconfig.org/#download" target="_blank" rel="external">官网</a>下吧。</p>
]]></content>
</entry>
<entry>
<title><![CDATA[Angular启动过程解读（一）]]></title>
<url>https://relign.github.io/Angular/angular-02/</url>
<content type="html"><![CDATA[<h3 id="找到代码代入口点"><a href="#找到代码代入口点" class="headerlink" title="找到代码代入口点"></a>找到代码代入口点</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.angular.bootstrap) {</div><div class="line"> <span class="comment">//AngularJS is already loaded, so we can return here...</span></div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'WARNING: Tried to load angular more than once.'</span>);</div><div class="line"> <span class="keyword">return</span>;</div><div class="line">}</div><div class="line"><span class="comment">//首先判断angular是否是多次加载,如果多次加载,输出警告信息;</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">//try to bind to jquery now so that one can write angular.element().read()</span></div><div class="line"><span class="comment">//but we will rebind on bootstrap again.</span></div><div class="line">bindJQuery();<span class="comment">//该方法会去绑定jquery,内部会判断jQuery有没有加载,有就是用jQuery,没有则调用自带的jqLite</span></div><div class="line"></div><div class="line">publishExternalAPI(angular);<span class="comment">//暴露angular对象,加载angular的一系列api方法</span></div><div class="line"></div><div class="line">jqLite(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> angularInit(<span class="built_in">document</span>, bootstrap);<span class="comment">//等待dom加载完后启动angular.</span></div><div class="line">});</div></pre></td></tr></table></figure>
<a id="more"></a>
<h3 id="bindJQuery"><a href="#bindJQuery" class="headerlink" title="bindJQuery()"></a>bindJQuery()</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindJQuery</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// bind to jQuery if present;</span></div><div class="line"> jQuery = <span class="built_in">window</span>.jQuery;</div><div class="line"> <span class="comment">// Use jQuery if it exists with proper functionality, otherwise default to us.</span></div><div class="line"> <span class="comment">// Angular 1.2+ requires jQuery 1.7.1+ for on()/off() support.</span></div><div class="line"> <span class="keyword">if</span> (jQuery && jQuery.fn.on) {</div><div class="line"> jqLite = jQuery;</div><div class="line"> extend(jQuery.fn, {</div><div class="line"> <span class="attr">scope</span>: JQLitePrototype.scope,</div><div class="line"> <span class="attr">isolateScope</span>: JQLitePrototype.isolateScope,</div><div class="line"> <span class="attr">controller</span>: JQLitePrototype.controller,</div><div class="line"> <span class="attr">injector</span>: JQLitePrototype.injector,</div><div class="line"> <span class="attr">inheritedData</span>: JQLitePrototype.inheritedData</div><div class="line"> });</div><div class="line"> <span class="comment">// Method signature:</span></div><div class="line"> <span class="comment">// jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments)</span></div><div class="line"> jqLitePatchJQueryRemove(<span class="string">'remove'</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">false</span>);</div><div class="line"> jqLitePatchJQueryRemove(<span class="string">'empty'</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">false</span>);</div><div class="line"> jqLitePatchJQueryRemove(<span class="string">'html'</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">true</span>);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> jqLite = JQLite;</div><div class="line"> }</div><div class="line"> angular.element = jqLite;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>这个方法是用来绑定jQuery的,如果发现window已经绑定了jQuery,就将jQueryt通过extend方法绑定到jqLite上,同时扩展了scope,isolateScope,controller,injector,inheritedData.否则,就使用angular自带的jQLite,最终都赋给angular.element.这也就是我们可以通过angular.element去调用jQuery的方法.<br>下面看一下这个extend方法: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @ngdoc function</div><div class="line"> * @name angular.extend</div><div class="line"> * @module ng</div><div class="line"> * @kind function</div><div class="line"> *</div><div class="line"> * @description</div><div class="line"> * Extends the destination object `dst` by copying own enumerable properties from the `src` object(s)</div><div class="line"> * to `dst`. You can specify multiple `src` objects.</div><div class="line"> * 将一个或多个 src 的可枚举属性复制到dst对象中</div><div class="line"> *</div><div class="line"> * @param {Object} dst Destination object.</div><div class="line"> * @param {...Object} src Source object(s).</div><div class="line"> * @returns {Object} Reference to `dst`.</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">dst</span>) </span>{</div><div class="line"> <span class="keyword">var</span> h = dst.$$hashKey;</div><div class="line"> forEach(<span class="built_in">arguments</span>, <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (obj !== dst) { <span class="comment">//去除同类的继承</span></div><div class="line"> forEach(obj, <span class="function"><span class="keyword">function</span>(<span class="params">value, key</span>) </span>{</div><div class="line"> dst[key] = value;</div><div class="line"> });</div><div class="line"> }</div><div class="line"> });</div><div class="line"></div><div class="line"> setHashKey(dst,h);</div><div class="line"> <span class="keyword">return</span> dst;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * Set or clear the hashkey for an object.</div><div class="line"> * @param obj object</div><div class="line"> * @param h the hashkey (!truthy to delete the hashkey)</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">setHashKey</span>(<span class="params">obj, h</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (h) {</div><div class="line"> obj.$$hashKey = h;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">delete</span> obj.$$hashKey;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>关于此处使用hashKey可以看看angularJs git的<a href="https://gitcandy.com/Repository/Commit/angular.js/016e1e675e717ab851759eac5be640bd2f238331" target="_blank" rel="external">提交记录</a>: </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">fix(angular): do not copy $$hashKey in copy/extend functions.</div><div class="line">//修复angular在copy/extend函数中不能复制 $$hashKey</div><div class="line">Copying the $$hashKey as part of copy/extend operations makes little</div><div class="line">sense since hashkey is used primarily as an object id, especially in</div><div class="line">the context of the ngRepeat directive. This change maintains the</div><div class="line">existing $$hashKey of an object that is being copied into (likewise for</div><div class="line">extend).</div><div class="line">It is not uncommon to take an item in a collection, copy it,</div><div class="line">and then append it to the collection. By copying the $$hashKey, this</div><div class="line">leads to duplicate object errors with the current ngRepeat.</div><div class="line"></div><div class="line">Closes #1875</div></pre></td></tr></table></figure>
<p>在绑定jQuery的时候,通过<code>jqLitePatchJQueryRemove</code>方法将jQuery原生的<code>remove,empty,html</code>多做一层处理,处理完后再调用jQuery原生的方法.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"> <span class="comment">/////////////////////////////////////////////</span></div><div class="line"><span class="comment">// jQuery mutation patch</span></div><div class="line"><span class="comment">//</span></div><div class="line"><span class="comment">// In conjunction with bindJQuery intercepts all jQuery's DOM destruction apis and fires a</span></div><div class="line"><span class="comment">// $destroy event on all DOM nodes being removed.</span></div><div class="line"><span class="comment">//</span></div><div class="line"><span class="comment">/////////////////////////////////////////////</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">jqLitePatchJQueryRemove</span>(<span class="params">name, dispatchThis, filterElems, getterIfNoArguments</span>) </span>{</div><div class="line"> <span class="keyword">var</span> originalJqFn = jQuery.fn[name]; <span class="comment">//获取jQuery原生的方法</span></div><div class="line"> originalJqFn = originalJqFn.$original || originalJqFn;<span class="comment">//未知 $original 有什么用</span></div><div class="line"> removePatch.$original = originalJqFn; <span class="comment">//未知 绑上去有什么用</span></div><div class="line"> jQuery.fn[name] = removePatch; <span class="comment">//重写jQuery的remove,html,empty方法</span></div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">removePatch</span>(<span class="params">param</span>) </span>{</div><div class="line"> <span class="comment">// jshint -W040</span></div><div class="line"></div><div class="line"> <span class="keyword">var</span> list = filterElems && param ? [<span class="keyword">this</span>.filter(param)] : [<span class="keyword">this</span>],<span class="comment">//this指向jQuery选择对象,当传入的filterElems为true并且jQuery原生方法传入参数不为空的时候,list才去取this.filter(param).</span></div><div class="line"> fireEvent = dispatchThis,</div><div class="line"> set, setIndex, setLength,</div><div class="line"> element, childIndex, childLength, children;</div><div class="line"> <span class="keyword">if</span> (!getterIfNoArguments || param != <span class="literal">null</span>) {<span class="comment">//这个判断remove,empty都会走这里,当html('')传入参数不为空也会走这里.</span></div><div class="line"> <span class="keyword">while</span>(list.length) {</div><div class="line"> set = list.shift();</div><div class="line"> <span class="keyword">for</span>(setIndex = <span class="number">0</span>, setLength = set.length; setIndex < setLength; setIndex++) {</div><div class="line"> element = jqLite(set[setIndex]);</div><div class="line"> <span class="keyword">if</span> (fireEvent) {</div><div class="line"> element.triggerHandler(<span class="string">'$destroy'</span>);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> fireEvent = !fireEvent;</div><div class="line"> }</div><div class="line"> <span class="keyword">for</span>(childIndex = <span class="number">0</span>, childLength = (children = element.children()).length;</div><div class="line"> childIndex < childLength;</div><div class="line"> childIndex++) {</div><div class="line"> list.push(jQuery(children[childIndex]));</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> originalJqFn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>需要注意的是这一个三元表达式:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> list = filterElems && param ? [<span class="keyword">this</span>.filter(param)] : [<span class="keyword">this</span>]</div></pre></td></tr></table></figure></p>
<p>当传入的filterElems为true并且jQuery原生方法传入参数不为空的时候,list才去取this.filter(param).这种情况会发生在:<br><code>angular.elment('div').remove('.test')</code>这种情况下,因为list是始终要得到你选择的那个DOM元素,所以进行这样一个三元判断. </p>
<blockquote>
<p>这里备注一个从<a href="http://www.sparrowjang.com/2014/01/11/jquery-detach-on-angular-directive/" target="_blank" rel="external">参考资料</a>上了解的内容:<br>在这里<code>element.triggerHandler('$destroy')</code>会告知angular底下的<code>transcludedScope</code>,这个element已经被摧毁了,所以会导致<code>$element.detach</code>的时候,<code>transcludedScope</code>无法被更新.<code>element.triggerHanler('$destroy')</code>的监听event可以参考<code>createBoundTranscludeFn</code>这个function,会有下面这段code去监听: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">clone.on(<span class="string">'$destroy'</span>, bind(transcludedScope, transcludedScope.$destroy));</div></pre></td></tr></table></figure>
<p>在<code>jqLitePatchJQueryRemove</code>只替换<code>remove</code>、<code>empty</code>、<code>html</code>,而没有替换<code>detach</code>,使用<code>detach</code>却会影响<code>scope</code>,真正原因要找到jquery的source code.<br>因为detach间接呼叫了remove: </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">detach: function( selector ) {</div><div class="line"> return this.remove( selector, true );</div><div class="line">}</div></pre></td></tr></table></figure>
<p>Example(1.2.7):</p>
<ul>
<li><p><a href="http://jsbin.com/olISoGu/1/edit?html,js,output" target="_blank" rel="external">directive在ready中呼叫$element.deatch</a>:此时<code>transclude</code>里面的scope将会失效. </p>
</li>
<li><p><a href="http://jsbin.com/olISoGu/3/edit?html,js,output" target="_blank" rel="external">directive在ready之前呼叫$element.deatch</a>:<code>tansclude</code>尚未被建立,自然而然就不会处理<code>$destroy</code>的event,<code>transclude</code>里的scope仍然会work. </p>
</li>
</ul>
<p>由此可知,只要scope尚未ready时,呼叫<code>detach</code>就不会中断scope的更新.若要让<code>directive</code>的scope正常运作,可用以下方式: </p>
<ul>
<li><a href="http://jsbin.com/olISoGu/4/edit?html,js,output" target="_blank" rel="external">不使用transclude</a></li>
<li><a href="http://jsbin.com/olISoGu/3/edit?html,js,output" target="_blank" rel="external">不在scope ready中,使用deatch</a></li>
<li><a href="http://jsbin.com/olISoGu/5/edit?html,js,output" target="_blank" rel="external">使用原生api</a></li>
<li>最后一种方式,jquery在angular之后include </li>
</ul>
<p>如果不是这么需要使用到jquery，建议就不要include了，当然jquery也提供很多方便的功能，依照project需求自己评估吧！</p>
</blockquote>
<h3 id="publishExternalAPI"><a href="#publishExternalAPI" class="headerlink" title="publishExternalAPI()"></a>publishExternalAPI()</h3>]]></content>
</entry>
<entry>
<title><![CDATA[Angular源码工具函数总结]]></title>
<url>https://relign.github.io/Angular/angular-01/</url>
<content type="html"><![CDATA[<p>在了解Angular启动过程之前,首先了解几个必要的Angular的工具函数:</p>
<h3 id="isFunction"><a href="#isFunction" class="headerlink" title="isFunction"></a>isFunction</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @ngdoc function</div><div class="line"> * @name angular.isFunction</div><div class="line"> * @module ng</div><div class="line"> * @kind function</div><div class="line"> *</div><div class="line"> * @description</div><div class="line"> * Determines if a reference is a `Function`.</div><div class="line"> *</div><div class="line"> * @param {*} value Reference to check.</div><div class="line"> * @returns {boolean} True if `value` is a `Function`.</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">isFunction</span>(<span class="params">value</span>)</span>{<span class="keyword">return</span> <span class="keyword">typeof</span> value === <span class="string">'function'</span>;}</div></pre></td></tr></table></figure>
<p> 不多解释，判断是否是函数类型。</p>
<a id="more"></a>
<h3 id="isArray"><a href="#isArray" class="headerlink" title="isArray"></a>isArray</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @ngdoc function</div><div class="line"> * @name angular.isArray</div><div class="line"> * @module ng</div><div class="line"> * @kind function</div><div class="line"> *</div><div class="line"> * @description</div><div class="line"> * Determines if a reference is an `Array`.</div><div class="line"> *</div><div class="line"> * @param {*} value Reference to check.</div><div class="line"> * @returns {boolean} True if `value` is an `Array`.</div><div class="line"> */</div><div class="line"><span class="keyword">var</span> isArray = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (!isFunction(<span class="built_in">Array</span>.isArray)) {</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>{</div><div class="line"> <span class="keyword">return</span> toString.call(value) === <span class="string">'[object Array]'</span>;</div><div class="line"> };</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> <span class="built_in">Array</span>.isArray;</div><div class="line">})();</div></pre></td></tr></table></figure>
<p> 判断是否是数组类型，代码关键在于<code>toString.call(value)</code>返回的值.<br> 这里需要注意<code>Object.prototype.toString.call(this)</code>和<code>Object.prototype.toString(this)</code>的区别。举个例子： </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>); </div><div class="line"> <span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype.toString.call(<span class="keyword">this</span>));</div><div class="line"> <span class="built_in">console</span>.log(<span class="built_in">Object</span>.prototype.toString(<span class="keyword">this</span>));</div><div class="line">}</div><div class="line">foo.call(<span class="string">"hello"</span>);</div><div class="line"><span class="comment">//输出结果：</span></div><div class="line"><span class="comment">//String { 0="h", 1="e", 2="l", 3="l" ,4="o"}</span></div><div class="line"><span class="comment">//[object String]</span></div><div class="line"><span class="comment">//[object Object]</span></div></pre></td></tr></table></figure>
<p> 由于在使用call/apply时会进行基本类型到包装类型的装换(一般在非严格模式下),所以当用<code>foo.call('hello')</code>以后,this指向的实际是<code>new String('hello')</code>一个String对象.<br> 而通过<code>Object.prototype.toString.apply/call</code>可以间接拿到对象的内部<code>[[class]]</code>标签,对于String对象会返回<code>[object String]</code>.<br> 直接调用<code>Object.prototype.toString</code>返回<code>[object Object]</code>是因为this指针指向的是<code>Object.prototype</code>.<br> 那么下面这段代码输出什么就显而易见了:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> aa = <span class="number">123</span>;</div><div class="line"><span class="built_in">console</span>.log(aa.toString());</div><div class="line"><span class="built_in">console</span>.log(toString.call(aa));</div></pre></td></tr></table></figure>
<h3 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h3> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @ngdoc function</div><div class="line"> * @name angular.forEach</div><div class="line"> * @module ng</div><div class="line"> * @kind function</div><div class="line"> *</div><div class="line"> * @description</div><div class="line"> * Invokes the `iterator` function once for each item in `obj` collection, which can be either an</div><div class="line"> * object or an array. The `iterator` function is invoked with `iterator(value, key)`, where `value`</div><div class="line"> * is the value of an object property or an array element and `key` is the object property key or</div><div class="line"> * array element index. Specifying a `context` for the function is optional.</div><div class="line"> *</div><div class="line"> * It is worth noting that `.forEach` does not iterate over inherited properties because it filters</div><div class="line"> * using the `hasOwnProperty` method.</div><div class="line"> *</div><div class="line"> js</div><div class="line"> var values = {name: 'misko', gender: 'male'};</div><div class="line"> var log = [];</div><div class="line"> angular.forEach(values, function(value, key) {</div><div class="line"> this.push(key + ': ' + value);</div><div class="line"> }, log);</div><div class="line"> expect(log).toEqual(['name: misko', 'gender: male']);</div><div class="line"></div><div class="line"> *</div><div class="line"> * @param {Object|Array} obj Object to iterate over.</div><div class="line"> * @param {Function} iterator Iterator function.</div><div class="line"> * @param {Object=} context Object to become context (`this`) for the iterator function.</div><div class="line"> * @returns {Object|Array} Reference to `obj`.</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEach</span>(<span class="params">obj, iterator, context</span>) </span>{</div><div class="line"> <span class="keyword">var</span> key;</div><div class="line"> <span class="keyword">if</span> (obj) {</div><div class="line"> <span class="keyword">if</span> (isFunction(obj)) {</div><div class="line"> <span class="keyword">for</span> (key <span class="keyword">in</span> obj) {</div><div class="line"> <span class="comment">// Need to check if hasOwnProperty exists,</span></div><div class="line"> <span class="comment">// as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function</span></div><div class="line"> <span class="keyword">if</span> (key != <span class="string">'prototype'</span> && key != <span class="string">'length'</span> && key != <span class="string">'name'</span> && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {</div><div class="line"> iterator.call(context, obj[key], key);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (isArray(obj) || isArrayLike(obj)) {</div><div class="line"> <span class="keyword">for</span> (key = <span class="number">0</span>; key < obj.length; key++) {</div><div class="line"> iterator.call(context, obj[key], key);</div><div class="line"> }</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (obj.forEach && obj.forEach !== forEach) {</div><div class="line"> obj.forEach(iterator, context);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">for</span> (key <span class="keyword">in</span> obj) {</div><div class="line"> <span class="keyword">if</span> (obj.hasOwnProperty(key)) {</div><div class="line"> iterator.call(context, obj[key], key);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> obj;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sortedKeys</span>(<span class="params">obj</span>) </span>{</div><div class="line"> <span class="keyword">var</span> keys = [];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) {</div><div class="line"> <span class="keyword">if</span> (obj.hasOwnProperty(key)) {</div><div class="line"> keys.push(key);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> keys.sort();</div><div class="line">}</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">forEachSorted</span>(<span class="params">obj, iterator, context</span>) </span>{</div><div class="line"> <span class="keyword">var</span> keys = sortedKeys(obj);</div><div class="line"> <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i < keys.length; i++) {</div><div class="line"> iterator.call(context, obj[keys[i]], keys[i]);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> keys;</div><div class="line">}</div></pre></td></tr></table></figure>
<p> 在读forEach函数的时候,有个地方是我所不理解的: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (isFunction(obj)) {</div><div class="line"> <span class="keyword">for</span> (key <span class="keyword">in</span> obj) {</div><div class="line"> <span class="comment">// Need to check if hasOwnProperty exists,</span></div><div class="line"> <span class="comment">// as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function</span></div><div class="line"> <span class="keyword">if</span> (key != <span class="string">'prototype'</span> && key != <span class="string">'length'</span> && key != <span class="string">'name'</span> && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {</div><div class="line"> iterator.call(context, obj[key], key);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p> forEach函数首先会传进来的obj做一次判断,是否为函数,接着它居然对函数进行<code>for (key in obj)</code>的操作,注意这时的key是undefined.后来在百度大神黄子毅的解释下,写了一个demo:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params"></span>) </span>{</div><div class="line"></div><div class="line">}</div><div class="line"><span class="built_in">Function</span>.prototype.ss = <span class="string">'123'</span>;</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> sum){</div><div class="line"> <span class="built_in">console</span>.log(key);</div><div class="line">}</div><div class="line"><span class="comment">//输出: ss</span></div><div class="line"><span class="comment">//es6</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">a</span> </span>{};</div><div class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> a){</div><div class="line"> <span class="built_in">console</span>.log(key);</div><div class="line">}</div><div class="line"><span class="built_in">Function</span>.prototype.xxx = <span class="number">1</span>;</div><div class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> a){</div><div class="line"> <span class="built_in">console</span>.log(key);<span class="comment">//xxx</span></div><div class="line">}</div></pre></td></tr></table></figure>
<p> 有木有觉得很神奇?类,class的typeof本质是function,当你定义<code>Function.prototype</code>了以后,对函数进行<code>for in</code>操作时,它的<code>prototype</code>居然可以被得到.</p>
]]></content>
</entry>
<entry>
<title><![CDATA[gulp之学习教程]]></title>
<url>https://relign.github.io/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/gulp/</url>
<content type="html"><![CDATA[<h3 id="导语"><a href="#导语" class="headerlink" title="导语"></a>导语</h3><p>gulp是基于node环境的一款前端自动化构建工具，是自动化构建项目的神器。利用它我们可以抛弃前端项目开发中很多重复的工作,比如：压缩文件(css,js,img)，编译文件(es6、JSX、coffee),文件测试、合并、格式化,浏览器自动刷新,部署文件生成等等,极大的开发了我们的工作效率。<br>gulp与grunt非常像，但是grunt频繁进行IO操作，用插件做太多的事情，插件没有遵守单一责任原则，落后流程控制直接导致其性能滞后。而gulp有以下几个特点:</p>
<blockquote>
<ul>
<li>易于使用<br>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</li>
<li>构建快速<br>利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。</li>
<li>插件高质<br>Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。</li>
<li>易于学习<br>通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。</li>
</ul>
</blockquote>
<a id="more"></a>
<h3 id="安装gulp"><a href="#安装gulp" class="headerlink" title="安装gulp"></a>安装gulp</h3><p>1.由于gulp基于node环境，所以首先你需要<a href="http://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html" target="_blank" rel="external">安装node</a>;<br>2.打开命令行工具(CMD或者git),安装gulp(全局安装);<br><code>$ npm install gulp -g</code></p>
<h3 id="运行一个简单的任务"><a href="#运行一个简单的任务" class="headerlink" title="运行一个简单的任务"></a>运行一个简单的任务</h3><p>我们通过构建一个简单的编译sass文件任务,来了解gulp;<br>1.新建一个文件夹(我的是gulp),进入这个文件夹;<br><code>$ cd gulp</code><br>2.初始化这个新项目,生成package.json;<br><code>$ npm init</code></p>
<blockquote>
<p>package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息,通过它我们可以了解到项目开发中所依赖的各种插件信息。<br>当然它远不止这么简单，你可以参考这篇文章去更加详细的了解它:<a href="http://ju.outofmemory.cn/entry/130809。" target="_blank" rel="external">http://ju.outofmemory.cn/entry/130809。</a></p>
</blockquote>
<p>3.安装示例所需要的npm包;<br>你可以将gulp当作项目依赖安装<br><code>$ npm install gulp --save-dev</code><br>安装编译sass文件的gulp插件 gulp-sass<br><code>$ npm install gulp-sass --save-dev</code><br>安装gulp-sass依赖的 node-sass<br><code>$ npm install node-sass --save-dev</code></p>
<blockquote>
<p>如果安装失败,可尝试用淘宝镜像源cnpm去安装,80%的几率你会安装失败<br><code>$ npm install -g cnpm --registry=https://registry.npm.taobao.org</code></p>
</blockquote>
<p>4.建立gulpfile.js文件<br>在项目根目录下创建一个名为 <code>gulpfile.js</code> 的文件作为gulp的入口文件。<br>接着创立一个scss文件 index.scss<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">@mixin center($width,$height){</div><div class="line"> width: $width;</div><div class="line"> height: $height;</div><div class="line"> position: absolute;</div><div class="line"> top: 50%;</div><div class="line"> left: 50%;</div><div class="line"> margin-top: -($height) / 2;</div><div class="line"> margin-left: -($width) / 2;</div><div class="line">}</div><div class="line">.box-center{</div><div class="line"> @include center(500px,300px);</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>在gulpfile.js中编写代码去管理sass编译:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</div><div class="line"><span class="keyword">var</span> sass = <span class="built_in">require</span>(<span class="string">'gulp-sass'</span>);</div><div class="line">gulp.task(<span class="string">'sass'</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'./index.scss'</span>)</div><div class="line"> .pipe(sass())</div><div class="line"> .pipe(gulp.dest(<span class="string">'./build'</span>));</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>打开命令行(CMD或者git)执行命令<br><code>$ gulp sass</code><br>查看编译出的文件<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.box-center</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">500px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</div><div class="line"> <span class="attribute">position</span>: absolute;</div><div class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</div><div class="line"> <span class="attribute">margin-top</span>: -<span class="number">150px</span>;</div><div class="line"> <span class="attribute">margin-left</span>: -<span class="number">250px</span>; }</div></pre></td></tr></table></figure></p>
<p>编译成功！</p>
]]></content>
</entry>
<entry>
<title><![CDATA[利用Hexo框架在Github上搭建个人博客]]></title>
<url>https://relign.github.io/hexo/hexo/</url>
<content type="html"><![CDATA[<h3 id="导语"><a href="#导语" class="headerlink" title="导语:"></a>导语:</h3><p><a href="https://hexo.io" target="_blank" rel="external">hexo</a> 是一款基于Node.js的静态博客框架，是一款快速、简洁且高效的博客框架。</p>
<blockquote>
<p>它具有以下几个特点：</p>
<ul>
<li>超快速度<br>Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。</li>
<li>支持Markdown<br>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</li>
<li>一键部署<br>只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。</li>
<li>丰富的插件<br>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。 </li>
</ul>
</blockquote>
<a id="more"></a>
<h3 id="环境安装"><a href="#环境安装" class="headerlink" title="环境安装:"></a>环境安装:</h3><ol>
<li><a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000" target="_blank" rel="external">安装git</a></li>
<li><a href="http://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html" target="_blank" rel="external">安装node.js</a><h3 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h3>在你的指定文件夹中打开git或者cmd执行以下命令进行安装：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-cli -g //安装hexo框架</div><div class="line">$ hexo init blog //初始化你的博客项目到/blog(你也可以指定自己的目录)目录下</div><div class="line">$ cd blog //进入博客目录</div><div class="line">$ npm install //安装blog项目所依赖的各种插件(最新版的hexo会在初始化项目时自动安装)</div><div class="line">$ hexo server //启动一个本地服务器,预览初始化后的博客 (默认为本机地址:http://localhost:4000/)</div></pre></td></tr></table></figure>
</li>
</ol>
<p>在浏览器中打开 <a href="http://localhost:4000/，这时可以看到Hexo已为你生成了一篇blog。" target="_blank" rel="external">http://localhost:4000/，这时可以看到Hexo已为你生成了一篇blog。</a></p>
<h3 id="在Github上创建个人博客仓库"><a href="#在Github上创建个人博客仓库" class="headerlink" title="在Github上创建个人博客仓库"></a>在Github上创建个人博客仓库</h3><p>登陆你自己的<a href="https://github.com/" target="_blank" rel="external">github</a>,在<a href="https://github.com/new" target="_blank" rel="external">创建仓库</a>页面创建自己的个人博客项目管理仓库,注意仓库名臣格式必须是username.github.io(uesername为你自己定义的项目名)</p>
<blockquote>
<p>github会为username.github.io命名规则的仓库开启site(站点)功能即 GitHub Pages 功能，site默认地址为：<a href="https://usename.github.io/" target="_blank" rel="external">https://usename.github.io/</a></p>
</blockquote>
<p><img src="/images/hexo/2016-07-10_233220.png" alt="alt text"><br><img src="/images/hexo/2016-07-10_233422.png" alt="alt text"></p>
<h3 id="生成静态资源，部署到Github"><a href="#生成静态资源，部署到Github" class="headerlink" title="生成静态资源，部署到Github"></a>生成静态资源，部署到Github</h3><ol>
<li>配置本地_config.yml<br>在你的博客项目根目录下找到<code>_config.yml</code>文件,在最后找到<code>deploy</code>选项,修改如下：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line"> type: git //部署类型，我采用的是git上传</div><div class="line"> repo: [email protected]:relign/relign.github.io.git //部署的github仓库地址，此处必须是刚刚部署的仓库的SSH地址</div><div class="line"> branch: master //部署仓库的分支(默认为master分支)</div></pre></td></tr></table></figure>
</li>
</ol>
<p><img src="/images/hexo/2016-07-11_001900.png" alt="alt text"></p>
<p>更多上传方式参见官网deploy参数设置:<a href="https://hexo.io/zh-cn/docs/deployment.html" target="_blank" rel="external">https://hexo.io/zh-cn/docs/deployment.html</a><br>git上传有问题的，建议通读廖雪峰的 <a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="external">Git教程</a></p>
<ol>
<li>生成静态资源<br>在博客项目根目录地址下打开git,运行命令<code>$ hexo generate</code> (可简写为<code>$ hexo g</code>) 即可生成网站的静态资源，存储在项目根目录下的 public 文件夹下。</li>
<li>部署到Github<br>执行命令<code>$ hexo deploy</code> (可简写为<code>$ hexo d</code>) 即可将本地的静态资源上传到Github仓库中。</li>
</ol>
<p>最后打开浏览器输入网址：<a href="https://username.github.io/" target="_blank" rel="external">https://username.github.io/</a> (username为你之前设置的仓库名称) 即可查阅你的博客站点。</p>
]]></content>
</entry>
</search>