forked from jaywcjlove/jaywcjlove.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
1382 lines (1309 loc) · 286 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
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
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[JSLite.io]]></title>
<subtitle><![CDATA[让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。 推进前端开发标准对于攻城师来说，人人有责。]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://jslite.io/"/>
<updated>2015-09-10T08:54:39.000Z</updated>
<id>http://jslite.io/</id>
<author>
<name><![CDATA[kacper.wang]]></name>
<email><![CDATA[wowohoo@qq.com]]></email>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title><![CDATA[通过命令升级nodejs版本]]></title>
<link href="http://jslite.io/2015/09/10/%E9%80%9A%E8%BF%87%E5%91%BD%E4%BB%A4%E5%8D%87%E7%BA%A7nodejs%E7%89%88%E6%9C%AC/"/>
<id>http://jslite.io/2015/09/10/通过命令升级nodejs版本/</id>
<published>2015-09-10T08:46:43.000Z</published>
<updated>2015-09-10T08:54:39.000Z</updated>
<content type="html"><![CDATA[<p>转载：<a href="http://theholmesoffice.com/node-js-fundamentals-how-to-upgrade-the-node-js-version/" target="_blank" rel="external">node-js-fundamentals-how-to-upgrade-the-node-js-version</a></p>
<p>Node.js 开发活跃，它的最新稳定版本也频繁变化，你不时会发现，一个模块不能在你当前的Node版本上使用，此时你需要升级Node</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 1. 检查 Node的当前版本，使用命令</span></span><br><span class="line">$ node -v </span><br><span class="line"></span><br><span class="line"><span class="comment"># 2. 清除npm cache</span></span><br><span class="line">$ sudo npm cache clean <span class="operator">-f</span> </span><br><span class="line"></span><br><span class="line"><span class="comment"># 3. 安装n模块</span></span><br><span class="line">$ sudo npm install -g n </span><br><span class="line"></span><br><span class="line"><span class="comment"># 4. 升级到最新版本</span></span><br><span class="line"><span class="comment"># 选择一个流行版本安装</span></span><br><span class="line">$ sudo n <span class="number">0.8</span>.<span class="number">11</span> </span><br><span class="line"></span><br><span class="line"><span class="comment"># 自动安装最新的稳定版本</span></span><br><span class="line">$ sudo n stable </span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看所有node版本</span></span><br><span class="line">$ sudo n ls</span><br><span class="line"></span><br><span class="line"><span class="comment"># 5. 查看Node的版本，检查升级是否成功</span></span><br><span class="line">$ node -v</span><br></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<![CDATA[<p>转载：<a href="http://theholmesoffice.com/node-js-fundamentals-how-to-upgrade-the-node-js-version/" target="_blank" rel="external">node-js-f]]>
</summary>
<category term="nodejs" scheme="http://jslite.io/tags/nodejs/"/>
</entry>
<entry>
<title><![CDATA[JS兼容多种模块规范，使用require加载JSLite方法]]></title>
<link href="http://jslite.io/2015/08/02/js%E5%85%BC%E5%AE%B9%E5%A4%9A%E7%A7%8D%E6%A8%A1%E5%9D%97%E8%A7%84%E8%8C%83%EF%BC%8C%E4%BD%BF%E7%94%A8require%E5%8A%A0%E8%BD%BDJSLite%E6%96%B9%E6%B3%95/"/>
<id>http://jslite.io/2015/08/02/js兼容多种模块规范，使用require加载JSLite方法/</id>
<published>2015-08-02T13:36:30.000Z</published>
<updated>2015-08-02T13:37:31.000Z</updated>
<content type="html"><![CDATA[<p>使用require加载<a href="https://github.com/JSLite/JSLite" target="_blank" rel="external">JSLite</a>、zepto、jQuery方法，它们是同类型的库所以加载方式一样，下面是一个实例。</p>
<h1 id="requirejs_引用实例方法">requirejs 引用实例方法</h1><p>RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<code><script></code>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。</p>
<ol>
<li><a href="https://github.com/jrburke/requirejs" target="_blank" rel="external">requirejs for github</a> </li>
<li><a href="http://requirejs.org/" target="_blank" rel="external">requirejs 官网</a></li>
<li><a href="https://github.com/JSLite/JSLite/releases" target="_blank" rel="external">JSLite 1.1.5</a></li>
</ol>
<h2 id="目录结构">目录结构</h2><p>去<a href="http://requirejs.org/" target="_blank" rel="external">RequireJS</a>官网下载，将<a href="http://requirejs.org/" target="_blank" rel="external">require.js</a> 放入到lib目录；下载<a href="https://github.com/JSLite/JSLite/releases" target="_blank" rel="external">JSLite 1.1.5</a> 放到lib目录中。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── app.js ├── index.html └── lib ├── JSLite.js ├── extend-jslite.js └── require.js</span><br></pre></td></tr></table></figure>
<h2 id="文件内容">文件内容</h2><p>app.js</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">requirejs.config({</span><br><span class="line"> paths: {</span><br><span class="line"> jslite:<span class="string">'lib/extend-jslite'</span>,</span><br><span class="line"> <span class="comment">// zepto:'lib/zepto'</span></span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="built_in">require</span>([<span class="string">'jslite'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">j</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"z,$:"</span>,j(<span class="string">'body'</span>))</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>index.html </p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="doctype"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="title">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">title</span>></span>Document<span class="tag"></<span class="title">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">data-main</span>=<span class="value">"app.js"</span> <span class="attribute">src</span>=<span class="value">"lib/require.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="title">script</span>></span></span><br><span class="line"><span class="tag"></<span class="title">head</span>></span></span><br><span class="line"><span class="tag"><<span class="title">body</span>></span></span><br><span class="line"><span class="tag"></<span class="title">body</span>></span></span><br><span class="line"><span class="tag"></<span class="title">html</span>></span></span><br></pre></td></tr></table></figure>
<p>extend-jslite.js<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">define([</span><br><span class="line"> <span class="string">'lib/JSLite'</span></span><br><span class="line">], <span class="function"><span class="keyword">function</span>(<span class="params">a</span>) </span>{</span><br><span class="line"><span class="pi"> "use strict"</span>;</span><br><span class="line"> <span class="built_in">window</span>.JSLite = JSLite</span><br><span class="line"> <span class="comment">// If `$` or `jQuery` is not yet defined, point them to `JSLite`</span></span><br><span class="line"> <span class="string">'$'</span> <span class="keyword">in</span> <span class="built_in">window</span> || (<span class="built_in">window</span>.$ = JSLite)</span><br><span class="line"> <span class="string">'jQuery'</span> <span class="keyword">in</span> <span class="built_in">window</span> || (<span class="built_in">window</span>.jQuery = JSLite)</span><br><span class="line"> <span class="keyword">return</span> JSLite;</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>
<h1 id="竞争者">竞争者</h1><ul>
<li><a href="https://github.com/systemjs/systemjs" target="_blank" rel="external">systemjs</a></li>
<li><a href="http://browserify.org/" target="_blank" rel="external">browserify</a></li>
<li><a href="http://webpack.github.io/" target="_blank" rel="external">webpack</a> | <a href="https://github.com/webpack/webpack" target="_blank" rel="external">github</a> 我更喜欢这个玩意儿</li>
</ul>
<h2 id="webpack">webpack</h2><p>AMD 或者 CommonJS – 两个它都支持。构建配置比 RequireJS 更加易于理解，也更具访问性。通过它的热插拔特性和内置的本地静态服务器可以让发布更加便捷。</p>
<h1 id="名词解释">名词解释</h1><h2 id="CommonJS">CommonJS</h2><p>CommonJs 是服务器端模块的规范，Node.js采用了这个规范。 </p>
<p>根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。 </p>
<p>模块文件foobar.js </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//私有变量</span></span><br><span class="line"><span class="keyword">var</span> test = <span class="number">123</span>;</span><br><span class="line"><span class="comment">//公有方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foobar</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.foo = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// do someing ...</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.bar = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//do someing ...</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"><span class="comment">//exports对象上的方法和变量是公有的</span></span><br><span class="line"><span class="keyword">var</span> foobar = <span class="keyword">new</span> foobar();</span><br><span class="line">exports.foobar = foobar;</span><br></pre></td></tr></table></figure>
<p>require方法默认读取<code>foobar.js</code>文件，可以省略js后缀</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> test = <span class="built_in">require</span>(<span class="string">'./foobar'</span>).foobar;</span><br><span class="line">test.bar();</span><br></pre></td></tr></table></figure>
<p>CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。像<code>Node.js</code>主要用于服务器的编程，<strong>加载的模块文件一般都已经存在本地硬盘</strong>，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是<code>浏览器环境，要从服务器加载模块</code>，这是就必须采用异步模式。所以就有了 <code>AMD</code> <code>CMD</code> 解决方案。<br><a href="http://ponyfoo.com/articles/a-gentle-browserify-walkthrough" target="_blank" rel="external">A Gentle Browserify Walkthrough</a> </p>
<h2 id="AMD">AMD</h2><p>AMD(Asynchromous Module Definition)是 <a href="https://github.com/jrburke/requirejs" target="_blank" rel="external">RequireJS</a> 在推广过程中对模块定义的规范化产出<br>AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。<br>适用AMD规范适用define方法定义模块。 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//通过数组引入依赖 ，回调函数通过形参传入依赖</span></span><br><span class="line">define([<span class="string">'someModule1'</span>, <span class="string">'someModule2'</span>], <span class="function"><span class="keyword">function</span> (<span class="params">someModule1, someModule2</span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">foo</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">/// someing</span></span><br><span class="line"> someModule1.test();</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> {foo: foo}</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>AMD规范允许输出模块兼容CommonJS规范，这时define方法如下：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">define(<span class="function"><span class="keyword">function</span> (<span class="params">require, exports, module</span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> reqModule = <span class="built_in">require</span>(<span class="string">"./someModule"</span>);</span><br><span class="line"> requModule.test();</span><br><span class="line"> </span><br><span class="line"> exports.asplode = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//someing</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> exports;</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="CMD">CMD</h2><p>CMD是<a href="https://github.com/seajs/seajs" target="_blank" rel="external">SeaJS</a> 在推广过程中对模块定义的规范化产出</p>
<p>CMD和AMD的区别有以下几点：</p>
<p>1.对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。</p>
<p>2.CMD推崇依赖就近，AMD推崇依赖前置。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//AMD</span></span><br><span class="line">define([<span class="string">'./a'</span>,<span class="string">'./b'</span>], <span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//依赖一开始就写好</span></span><br><span class="line"> a.test();</span><br><span class="line"> b.test();</span><br><span class="line">});</span><br><span class="line"> </span><br><span class="line"><span class="comment">//CMD</span></span><br><span class="line">define(<span class="function"><span class="keyword">function</span> (<span class="params">requie, exports, module</span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//依赖可以就近书写</span></span><br><span class="line"> <span class="keyword">var</span> a = <span class="built_in">require</span>(<span class="string">'./a'</span>);</span><br><span class="line"> a.test();</span><br><span class="line"> </span><br><span class="line"> ...</span><br><span class="line"> <span class="comment">//软依赖</span></span><br><span class="line"> <span class="keyword">if</span> (status) {</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> b = requie(<span class="string">'./b'</span>);</span><br><span class="line"> b.test();</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法。</p>
<p>3.AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。<br><a href="https://github.com/seajs/seajs/issues/277" target="_blank" rel="external">区别的详细解释</a></p>
<h2 id="UMD兼容多种模块规范">UMD兼容多种模块规范</h2><p>umd是<code>AMD</code>和<code>CommonJS</code>的糅合<br>AMD 浏览器第一的原则发展 异步加载模块。<br>CommonJS 模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。<br>这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。 </p>
<p>UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。<br>在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。</p>
<p>兼容多种模块规范 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">root, factory</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> JSLite = factory(root);</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> define === <span class="string">'function'</span> && define.amd) {</span><br><span class="line"> <span class="comment">// AMD</span></span><br><span class="line"> <span class="comment">// define([], factory);</span></span><br><span class="line"> define(<span class="string">'JSLite'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="keyword">return</span> JSLite; });</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> exports === <span class="string">'object'</span>) {</span><br><span class="line"> <span class="comment">// Node.js</span></span><br><span class="line"> <span class="built_in">module</span>.exports = JSLite;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// Browser globals</span></span><br><span class="line"> root.JSLite = JSLite;</span><br><span class="line"> }</span><br><span class="line">})(<span class="keyword">this</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//module ...</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>兼容多种模块规范 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params">name,definition</span>)</span>{</span><br><span class="line"> <span class="comment">//检测上下文环境是否为AMD或CMD</span></span><br><span class="line"> <span class="keyword">var</span> hasDefine = <span class="keyword">typeof</span> define === <span class="string">'function'</span>,</span><br><span class="line"> <span class="comment">// 检测上下文环境是否为Node</span></span><br><span class="line"> hasExports = <span class="keyword">typeof</span> <span class="built_in">module</span> !== <span class="string">'function'</span> && <span class="built_in">module</span>.exports;</span><br><span class="line"> <span class="keyword">if</span>(hasDefine){</span><br><span class="line"> <span class="comment">//AMD环境或CMD环境</span></span><br><span class="line"> define(definition);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(hasExports){</span><br><span class="line"> <span class="comment">//定义为普通Node模块</span></span><br><span class="line"> <span class="built_in">module</span>.exports = definition();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//将模块的执行结果挂在window变量中，在浏览器中this指向window对象</span></span><br><span class="line"> <span class="keyword">this</span>[name] = definition();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">})(<span class="string">'hello'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> hello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line"> <span class="keyword">return</span> hello</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<p>使用require加载<a href="https://github.com/JSLite/JSLite" target="_blank" rel="external">JSLite</a>、zepto、jQuery方法，它们是同类型的库所以加载方式一样，下面是一个实例。<]]>
</summary>
<category term="JSLite" scheme="http://jslite.io/tags/JSLite/"/>
<category term="js" scheme="http://jslite.io/tags/js/"/>
<category term="requirejs" scheme="http://jslite.io/tags/requirejs/"/>
</entry>
<entry>
<title><![CDATA[Stylus：轻而易举实现 CSS 前缀和 reset CSS]]></title>
<link href="http://jslite.io/2015/07/28/Stylus%EF%BC%9A%E8%BD%BB%E8%80%8C%E6%98%93%E4%B8%BE%E5%AE%9E%E7%8E%B0-CSS-%E5%89%8D%E7%BC%80%E5%92%8C-reset-CSS/"/>
<id>http://jslite.io/2015/07/28/Stylus：轻而易举实现-CSS-前缀和-reset-CSS/</id>
<published>2015-07-28T06:15:33.000Z</published>
<updated>2015-07-28T06:16:30.000Z</updated>
<content type="html"><![CDATA[<p><a href="https://github.com/jaywcjlove/AutoPrefixCSS/issues" target="_blank" rel="external"><img src="https://img.shields.io/github/issues/jaywcjlove/AutoPrefixCSS.svg" alt=""></a> <a href="https://github.com/jaywcjlove/AutoPrefixCSS/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/AutoPrefixCSS.svg" alt=""></a> <a href="https://github.com/jaywcjlove/AutoPrefixCSS/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/AutoPrefixCSS.svg" alt=""></a> <a href="https://github.com/jaywcjlove/AutoPrefixCSS/releases" target="_blank" rel="external"><img src="https://img.shields.io/github/release/jaywcjlove/AutoPrefixCSS.svg" alt=""></a></p>
<p>Break free from CSS prefix hell!<br>摆脱CSS前缀地狱！ </p>
<p>CSS3 每个浏览器都有私有属性例如 <code>-moz</code> 代表firefox浏览器私有属性、<code>-ms</code> 代表IE浏览器私有属性、<code>-webkit</code> 代表chrome、safari私有属性，在 <code>CSS3</code> 标准还在没有定稿的时候，<code>CSS3</code> 中有很多属性都还处于实验性阶段，各个浏览器都针对暂行的规范草稿根据自己的理解做了 <code>CSS3</code> 新特性实现，但因为规范尚未成熟和定稿，某些描述的不清晰或是处理逻辑的不完整可能导致一些目前的实现在日后被修改。暂时使用带前缀的属性比如 <code>-webkit-transform</code> 的初衷，是为了以后即便 <code>transform</code> 的最终实现与目前不同，你原来写的 <code>-webkit-transform</code> 还是可以正常工作。所以浏览器现在开始越来越倾向于直接实现最终属性而抛弃前缀了。老的浏览器可能不支持 <code>transform</code> ，所以我们通常为了兼容各个版本的浏览器，<code>-webkit-transform</code> 和 <code>transform</code> 两个属性都加上了。 </p>
<ul>
<li>-webkit- (Google Chrome & Safari)</li>
<li>-khtml- (Konqueror)</li>
<li>-moz- (Mozilla Firefox)</li>
<li>-ms- (Internet Explorer)</li>
<li>-o- (Opéra)</li>
<li>syntaxe normale</li>
</ul>
<h1 id="下载">下载</h1><figure class="highlight"><table><tr><td class="code"><pre><span class="line">$ bower install AutoPrefixCss #下载 $ bower info AutoPrefixCss #查看详情</span><br></pre></td></tr></table></figure>
<h1 id="初衷">初衷</h1><p>网上有很多js实现的自动添加 CSS前缀的哦，例如<a href="https://github.com/postcss/autoprefixer" target="_blank" rel="external">autoprefixer</a> 、<a href="http://leaverou.github.com/prefixfree/" target="_blank" rel="external">prefixfree</a>。 </p>
<ul>
<li><code>stylus</code> 的出现感觉添加这种前缀不用太麻烦了。</li>
<li>只生成CSS，浏览器直接渲染CSS，不用通过js生成CSS在渲染。</li>
</ul>
<h1 id="使用必备条件">使用必备条件</h1><p>需要安装 <code>node.js</code> 和 <code>stylus</code> ，还得学会使用 <code>stylus</code>， <a href="https://github.com/stylus/stylus" target="_blank" rel="external">stylus github</a>， <a href="http://jslite.io/2015/04/27/stylus%E8%8F%9C%E9%B8%9F%E5%85%A5%E9%97%A8%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/">stylus教程</a></p>
<h1 id="Usage">Usage</h1><h2 id="reset-styl">reset.styl</h2><p>只需要将 <code>reset.styl</code> 到您的项目，然后引用 <code>@import('reset.styl')</code> ，然后在你所引用的<code>.styl</code> 中调用下面任何一个方法：</p>
<ul>
<li>global-reset() # 所有标签重置不包括HTML5新标签重置</li>
<li>nested-reset() # 嵌套标签重置</li>
<li>reset-font()</li>
<li>reset-box-model()</li>
<li>reset-body()</li>
<li>reset-table() # 表格重置</li>
<li>reset-table-cell() # 表格单格重置</li>
<li>reset-html5() # HTML5新标签重置</li>
</ul>
<p>例子： </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@import('reset.styl') global-reset()</span><br></pre></td></tr></table></figure>
<h2 id="自动添加CSS后缀">自动添加CSS后缀</h2><p>只需要将 <code>vendor.styl</code> 到您的项目，然后引用 <code>@import('vendor.styl')</code> ，然后你在你的 <code>styl</code> 文件中正常使用 <code>stylus</code> 语法就好了。效果如下例子：</p>
<h3 id="opacity">opacity</h3><p>adds opacity filter for IE</p>
<figure class="highlight stylus"><table><tr><td class="code"><pre><span class="line"><span class="at_rule">@import</span>(<span class="string">'vendor.styl'</span>)</span><br><span class="line"><span class="tag">body</span></span><br><span class="line"> <span class="attribute">opacity</span>:<span class="number">0.5</span></span><br></pre></td></tr></table></figure>
<p>生成：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">opacity</span>:<span class="value"> <span class="number">0.5</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-khtml-opacity</span>:<span class="value"> <span class="number">0.5</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-moz-opacity</span>:<span class="value"> <span class="number">0.5</span></span></span>; <span class="comment">/* old Mozilla */</span></span><br><span class="line"> <span class="rule"><span class="attribute">filter</span>:<span class="value"> progid:DXImageTransform.Microsoft.<span class="function">Alpha</span>(Opacity=<span class="number">50</span>)</span></span>; <span class="comment">/*old IE */</span></span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<p><a href="https://github.com/jaywcjlove/AutoPrefixCSS/issues" target="_blank" rel="external"><img src="https://img.shields.io/github/issue]]>
</summary>
<category term="css" scheme="http://jslite.io/tags/css/"/>
<category term="stylus" scheme="http://jslite.io/tags/stylus/"/>
</entry>
<entry>
<title><![CDATA[Nodejs 制作命令行工具]]></title>
<link href="http://jslite.io/2015/06/19/Nodejs-%E5%88%B6%E4%BD%9C%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7/"/>
<id>http://jslite.io/2015/06/19/Nodejs-制作命令行工具/</id>
<published>2015-06-19T03:15:01.000Z</published>
<updated>2015-08-04T15:06:15.000Z</updated>
<content type="html"><![CDATA[<h1 id="wcj">wcj</h1><p><a href="https://github.com/jaywcjlove/wcj/issues" target="_blank" rel="external"><img src="https://img.shields.io/github/issues/jaywcjlove/wcj.svg" alt=""></a> <a href="https://github.com/jaywcjlove/wcj/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/wcj.svg" alt=""></a> <a href="https://github.com/jaywcjlove/wcj/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/wcj.svg" alt=""></a> <a href="https://github.com/jaywcjlove/wcj/releases" target="_blank" rel="external"><img src="https://img.shields.io/github/release/jaywcjlove/wcj.svg" alt=""></a></p>
<p><a href="https://github.com/jaywcjlove/wcj" target="_blank" rel="external">github仓库源码下载</a></p>
<p>这不仅是一篇教程，还是通过命令行输出我自己简历的一个工具O(∩_∩)O哈哈哈~，很有趣的样子哦。</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"># 全局安装，安装报错是需要前面加上sudo $ sudo npm install -g wcj # 输出帮助 $ wcj -h Usage: wcj 这里是我私人玩耍的命令哦！[options] <package> Commands: resume|rs [options] [cmd] 这里是我的简历详情！ Options: -h, --help output usage information -V, --version output the version number # 输出子命令帮助 $ wcj rs -h Usage: resume|rs [options] [cmd] 这里是我的简历详情！ Options: -h, --help output usage information -b, --basicinfo [type] 基本信息 -e, --education [type] 教育经历 basicinfo 说明: preview -b 预览基本信息 preview -e 预览教育经历 -b, --basicinfo 基本信息 name : 名字 height : 身高 dateOfBirth : 出生日期 workExperience : 工作经验 mobile : 手机号码 telephone : 电话号码 email : 邮箱地址 residency : 居住地点 currentSituation : 现状 currentCity : 当前城市 nation : 国家 region : 地区 postalCode : 邮编地址 ID : 身份证ID website : 个人网赚 maritalStatus : 婚姻状况 politicalStatus : 政治面貌 -e, --education 教育经历</span><br></pre></td></tr></table></figure>
<p>在使用 <code>Nodejs</code> 过程中，有很多包都支持全局安装，提供一个命令，然后在命令行我们就可以完成一些任务。有时候我们也需要开发这样的命令工具。在<code>Node.js</code> 中发现弄个命令行工具特别轻松，我来学习如何使用 <code>Node.js</code> 生成自己的command命令，在未来的项目中方便自己。 </p>
<ul>
<li>先弄个小实例感受一下命令行的魅力</li>
<li>再用命令行实现输出自己的简历（我觉得这个可能很有趣）</li>
<li>常用的命令加入进来<ul>
<li>ls 查看当前目录</li>
<li>ls -a 包括隐藏文件</li>
<li>打开当前目录</li>
</ul>
</li>
<li>就先这么计划着吧。</li>
</ul>
<h1 id="小实例">小实例</h1><p>开始编写之前需要确认的一件事情是你已经安装了<a href="https://nodejs.org/" target="_blank" rel="external">Node.js</a>。你可以在命令行中运行 <code>which node</code> 来确认是否已经安装，或者运行 <code>node -v</code> 查看 node 的版本 。如果你已经安装了node，你可以看到类似于下面的输出结果，一般情况安装了node.js 顺带npm工具自动安装了。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ which node /usr/local/bin/node $ node -v v0.10.36</span><br></pre></td></tr></table></figure>
<h2 id="创建目录">创建目录</h2><p>首先任意创建一个文件夹，初始化 <code>package.json</code> 文件，在该文件夹下创建bin目录：</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">$ mkdir wcj #创建一个文件夹 $ cd wcj && mkdir bin $ npm init #初始化 `package.json` 文件</span><br></pre></td></tr></table></figure>
<h2 id="编写命令行">编写命令行</h2><p>cd到 <code>bin</code> 目录下，新建一个 <code>wcj.js</code> 文件(名字自取)，编写如下代码，在js文件顶部加上 <code>#!/usr/bin/env node</code> 这段代码：</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">#!/usr/bin/env node </span><br><span class="line">var fs = require("fs"),</span><br><span class="line"> path = process.cwd();</span><br><span class="line"></span><br><span class="line">var run= function (obj) {</span><br><span class="line"> if(obj[0] === '-v'){</span><br><span class="line"> console.log('version is 1.0.0');</span><br><span class="line"> }else if(obj[0] === '-h'){</span><br><span class="line"> console.log('Useage:');</span><br><span class="line"> console.log(' -v --version [show version]');</span><br><span class="line"> }else{</span><br><span class="line"> fs.readdir(path, function(err, files){</span><br><span class="line"> if(err){</span><br><span class="line"> return console.log(err);</span><br><span class="line"> }</span><br><span class="line"> for(var i = 0; i < files.length; i += 1){</span><br><span class="line"> console.log(files[i]);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line">//获取除第一个命令以后的参数，使用空格拆分</span><br><span class="line">run(process.argv.slice(2));</span><br></pre></td></tr></table></figure>
<p>上面的 <code>#!/usr/bin/env node</code> 被成为 <code>shebang</code> ，表示用后面的路径所示的程序来执行当前文件夹。还需要一个 <code>package.json</code> 文件</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> "<span class="attribute">name</span>": <span class="value"><span class="string">"wcj"</span></span>,</span><br><span class="line"> "<span class="attribute">version</span>": <span class="value"><span class="string">"1.0.0"</span></span>,</span><br><span class="line"> "<span class="attribute">description</span>": <span class="value"><span class="string">"wcj ---"</span></span>,</span><br><span class="line"> "<span class="attribute">repository</span>": <span class="value">{</span><br><span class="line"> "<span class="attribute">type</span>": <span class="value"><span class="string">"git"</span></span>,</span><br><span class="line"> "<span class="attribute">url</span>": <span class="value"><span class="string">"https://github.com/jaywcjlove/wcj.git"</span></span><br><span class="line"> </span>}</span>,</span><br><span class="line"> "<span class="attribute">main</span>": <span class="value"><span class="string">"index.js"</span></span>,</span><br><span class="line"> "<span class="attribute">bin</span>": <span class="value">{ "<span class="attribute">wcj</span>": <span class="value"><span class="string">"bin/wcj.js"</span> </span>}</span>,</span><br><span class="line"> "<span class="attribute">author</span>": <span class="value"><span class="string">"kenny wang <wowohoo@qq.com> "</span></span>,</span><br><span class="line"> "<span class="attribute">license</span>": <span class="value"><span class="string">"MIT"</span></span><br><span class="line"></span>}</span><br></pre></td></tr></table></figure>
<p>运行 <code>node bin/wcj.js</code> 会显示当前文件夹下的所以文件和文件夹名。这个玩意儿真的跑起来了。更多npm link的信息请<a href="https://docs.npmjs.com/cli/link" target="_blank" rel="external">查看</a> </p>
<p><code>package.json</code> 文件中 <code>bin</code> 里面的内容表示这个字段将 <code>wcj</code> 命令映射到了你的 <code>bin/wcj.js</code> 脚本。<a href="https://docs.npmjs.com/files/package.json#bin" target="_blank" rel="external">bin参考</a> </p>
<p>此工具采用 npm版本号采用的 <a href="http://semver.org/lang/zh-CN/" target="_blank" rel="external">semver</a> 规则</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">"bin": { "wcj": "bin/wcj.js" }</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/jaywcjlove/wcj/blob/master/examples/ls.js" target="_blank" rel="external">列子源码</a></p>
<h2 id="全局运行命令调试">全局运行命令调试</h2><blockquote>
<p>确保你在 <code>package.json</code> 文件中添加了 <code>bin</code> 节点。然后打开命令了工具进入 <code>wcj</code> 目录 </p>
</blockquote>
<h3 id="install">install</h3><p>如果在项目目录下运行没有问题，可以将当前目录模块安装到全局，也可以采用此方法来更新你的命令行工具</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">sudo npm install . -g</span><br></pre></td></tr></table></figure>
<h3 id="link">link</h3><p>或者目录输入 <code>npm link</code> 会自动添加全局的 <code>symbolic link</code> ，然后就可以使用自己的命令了。</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">$ wcj #README.md #bin #package.json $ cmd -v # version is 1.0.0 $ cmd -h #Useage: # -v --version [show version]</span><br></pre></td></tr></table></figure>
<h3 id="错误处理">错误处理</h3><p>在运行 <code>sudo npm install . -g</code> 会有一堆警告可以忽视</p>
<p>如果你已经 <code>npm link</code> 搞了一遍你再 link 一遍，会报如下错误。即使你 <code>npm unlink</code> 也会报如下错误：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm link npm ERR! Darwin 14.3.0 npm ERR! argv "node" "/usr/local/bin/npm" "link" npm ERR! node v0.10.36 npm ERR! npm v2.7.1 npm ERR! path /usr/local/bin/wcj npm ERR! code EEXIST npm ERR! Refusing to delete: /usr/local/bin/wcj not in /Applications/XAMPP/xamppfiles/htdocs/git/github.com/myJS/wcj File exists: /usr/local/bin/wcj Move it away, and try again.</span><br></pre></td></tr></table></figure>
<p>让你删除 <code>/usr/local/bin/wcj</code> 再 <code>npm link</code> ， 删除此目录运行 <code>rm -rf /usr/local/bin/wcj</code></p>
<h2 id="发布安装">发布安装</h2><h3 id="发布到npm中">发布到npm中</h3><p>发布必须注册 <a href="https://www.npmjs.com/" target="_blank" rel="external">npm</a> 账号，还有 <a href="https://github.com/jaywcjlove" target="_blank" rel="external">github</a> 账号，具体怎么玩儿问 谷歌大婶吧。在<a href="http://jslite.io">JSLite.io</a> 中也有教程哦。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm publish</span><br></pre></td></tr></table></figure>
<h3 id="安装">安装</h3><p>前提你发布到了<a href="https://www.npmjs.com/" target="_blank" rel="external">npm</a>中，你就可以运行下面的命令了。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">sudo npm install -g wcj</span><br></pre></td></tr></table></figure>
<p>例子下载：<a href="https://github.com/jaywcjlove/wcj/releases/tag/v1.0.1" target="_blank" rel="external">v1.0.1</a></p>
<h1 id="Commander">Commander</h1><p>依赖 <code>nodejs</code> 原生开发命令工具比较麻烦，<a href="https://github.com/tj/commander.js" target="_blank" rel="external">Commander.js</a> 可以帮助我们简化命令行开发。Commander 是一款重量轻，表现力和强大的命令行框架。提供了用户命令行输入和参数解析强大功能。Commander 源自一个同名的Ruby项目。<a href="https://github.com/tj/commander.js" target="_blank" rel="external">Commander.js</a> 是 <a href="https://github.com/tj" target="_blank" rel="external">TJ</a> 写的一个帮助快速开发Nodejs命令行工具的package。<a href="https://github.com/tj" target="_blank" rel="external">TJ</a>这货是Nodejs社区里非常知名的高产作者。方便的定义option(包括option的描述和其回调函数)和子命令。 </p>
<h2 id="特性">特性</h2><p>Commander的方便之处在于： </p>
<p>自记录代码、自动生成帮助、合并短参数（“ABC”==“-A-B-C”）、默认选项、强制选项、命令解析、提示符</p>
<h2 id="API">API</h2><p><code>Option()</code>: 初始化自定义参数对象，设置“关键字”和“描述”<br><code>Command()</code>: 初始化命令行参数对象，直接获得命令行输入<br><code>Command#command()</code>: 定义一个命令名字<br><code>Command#action()</code>: 注册一个callback函数<br><code>Command#option()</code>: 定义参数，需要设置“关键字”和“描述”，关键字包括“简写”和“全写”两部分，以”,”,”|”,”空格”做分隔。<br><code>Command#parse()</code>: 解析命令行参数argv<br><code>Command#description()</code>: 设置description值<br><code>Command#usage()</code>: 设置usage值 </p>
<p>参考：<a href="http://tj.github.io/commander.js" target="_blank" rel="external">官方文档例子</a> </p>
<h2 id="安装-1">安装</h2><p>安装commander</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">sudo npm install commander</span><br></pre></td></tr></table></figure>
<h2 id="Option">Option</h2><p>内置选项Built-in option，Commander 会为程序提供给一个默认的 <code>-h</code> option。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">program</span><br><span class="line"> .version(<span class="string">'0.0.1'</span>)</span><br><span class="line"> .option(<span class="string">'-r, --resume'</span>, <span class="string">'简历'</span>);</span><br><span class="line">program.parse(process.argv);</span><br></pre></td></tr></table></figure>
<p>其中parse函数是处理定义的option和sub-command， 解析命令行参数并触发相应的回调(下文会说)。</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"> ./bin/wcj.js -h ## 输出下面内容 Usage: wcj [options] Options: -h, --help output usage information -V, --version output the version number -r, --resume 简历</span><br></pre></td></tr></table></figure>
<p>可以看到默认就有个 <code>-h</code> 参数，传入后会输出 <code>wcj</code> 命令的帮助信息。 </p>
<h2 id="Custom_option">Custom option</h2><p>为 <code>wcj</code> 命令增加一个 <code>option</code>，展示说明是我的简历。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">program .version('0.0.1') .option('-r| --resume', '简历'); program.parse(process.argv); if (program.resume) { console.log('简历 - ' + '这个是我的简历！' ); }</span><br></pre></td></tr></table></figure>
<p><code>option()</code> 接收<a href="http://tj.github.io/commander.js/#Command.prototype.option" target="_blank" rel="external">四个参数</a></p>
<ul>
<li>第一个参数中，<code>-r</code> 为<code>short option</code>，<code>--resume</code>为对应的<code>long option</code>, 二者的分割符是<code>|</code>或者<code>,</code>。在命令行里使用时，这两个是等价的。 区别是后者可以在程序里通过 <code>program.resume</code> 的方式取到该 <code>option</code> 的值，此处 <code>option</code> 的值为 <code>bool</code>，也可以为字符串。</li>
<li>第二个为 <code>option</code> 描述, 会在 <code>help</code> 信息里展示出来</li>
<li>第三个参数为回调函数</li>
<li>第四个参数为默认值</li>
</ul>
<h2 id="Unknown_option">Unknown option</h2><p>当接收到未定义的option时，程序会自动抛出错误</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">./bin/wcj.js -h ## 输出下面内容 error: unknown option '--res'</span><br></pre></td></tr></table></figure>
<p>Commander同时提供了api来取消这个自动报错机制， <code>.allowUnknownOption()</code>。 </p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">#!/usr/bin/env node</span><br><span class="line">program</span><br><span class="line"> .allowUnknownOption()</span><br><span class="line"> .version('0.0.1')</span><br><span class="line"> .option('-r, --resume', '简历');</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br><span class="line">//省略一些细节...</span><br></pre></td></tr></table></figure>
<h2 id="Option_types">Option types</h2><p>Command支持以下两种类型的option： <code>required</code> 、 <code>optional</code> 和 <code>bool</code></p>
<h3 id="required_和_optional">required 和 optional</h3><p>在option的第一个参数里, 除了<code>short</code>，<code>long option</code>，还可以指定option类型，分隔符也是<code>|</code>和<code>,</code> 其中</p>
<ul>
<li><code><lang></code> required参数，使用时后边必须跟参数值, 否则程序会报错</li>
<li><code>[db]</code> optional参数，后面可以选择是否跟参数值</li>
</ul>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">#!/usr/bin/env node </span><br><span class="line">var program = require('commander');</span><br><span class="line">program</span><br><span class="line"> .allowUnknownOption()</span><br><span class="line"> .version('0.0.1')</span><br><span class="line"> .option('-r, --resume', '简历')</span><br><span class="line"> .option('-l, --language <lang>', '这个语言是我擅长的语言。')</span><br><span class="line"> .parse(process.argv);</span><br><span class="line"></span><br><span class="line">if (program.resume) {</span><br><span class="line"> console.log('简历'</span><br><span class="line"> + '-'</span><br><span class="line"> + '这个是我的简历！'</span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">if (program.language) console.log('language: 我擅长的语言`' + program.language + '`');</span><br><span class="line">if (program.database) console.log('db: 我擅长的语言`' + program.database + '`');</span><br></pre></td></tr></table></figure>
<p>看下效果</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">./bin/wcj.js -l python ## 输出 language: 我擅长的语言`python` db: 我擅长的语言`MySQL` ./bin/wcj.js -l ## 输出 error: option '-l, --language <lang>' argument missing</span><br></pre></td></tr></table></figure>
<h3 id="bool">bool</h3><p>选项值为布尔型, 像上面的<code>--date</code>, 默认是<code>false</code>，当使用此参数时，<code>program.date</code> 为<code>true</code>, 否则为<code>false</code> </p>
<p><code>bool</code>型<code>option</code>有个变种，当<code>long option</code>定义为<code>no-*</code>时默认值为<code>true</code>, 将</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> program = <span class="built_in">require</span>(<span class="string">'commander'</span>);</span><br><span class="line">program</span><br><span class="line"> .option(<span class="string">'-d, --no-date'</span>, <span class="string">'don‘t display current date'</span>)</span><br><span class="line"> .parse(process.argv);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">if</span> (program.date) {</span><br><span class="line"> <span class="built_in">console</span>.log(dt.getFullYear()</span><br><span class="line"> + <span class="string">'-'</span></span><br><span class="line"> + (dt.getMonth() + <span class="number">1</span>)</span><br><span class="line"> + <span class="string">'-'</span></span><br><span class="line"> + dt.getDate()</span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>不带-d 参数时, 参数的默认值为true</p>
<h2 id="Automated_—help">Automated —help</h2><p>Commander会根据配置的option，sub-command等信息，自动生成help信息。</p>
<h3 id="Custom_help">Custom help</h3><p>可以通过监听—help事件来输出额外的帮助信息，如下面给fe命令添加了一些examples</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// must be before .parse() since node's emit() is immediate</span></span><br><span class="line">program.on(<span class="string">'--help'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">' 自定义的例子:'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">''</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">' 输出命令 wcj -d'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">' 输出命令 wcj -l python'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">''</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br></pre></td></tr></table></figure>
<p>效果如下：</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">./bin/wcj.js -h Usage: wcj [options] Options: -h, --help output usage information -d, --no-date display current time -l, --language <lang> 这个语言是我擅长的语言。 -b, --database [db] 该数据库为我最擅长数据库 自定义的例子: 输出命令 wcj -d 输出命令 wcj -l python</span><br></pre></td></tr></table></figure>
<h2 id="像git风格一样的命令">像git风格一样的命令</h2><p><a href="https://github.com/jaywcjlove/wcj/blob/master/examples/gitstyle.js" target="_blank" rel="external">列子源码</a></p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">#!/usr/bin/env node </span><br><span class="line">var program = require('commander');</span><br><span class="line">var appInfo = require('./../package.json');</span><br><span class="line"></span><br><span class="line">program</span><br><span class="line"> .version(appInfo.version)</span><br><span class="line"> .usage('这里是我私人玩耍的命令哦！[options] <package>')</span><br><span class="line"></span><br><span class="line">//像git风格一样的子命令</span><br><span class="line">program</span><br><span class="line"> //子命令</span><br><span class="line"> .command('resume <cmd>')</span><br><span class="line"> //短命令 - 简写方式</span><br><span class="line"> .alias('rs')</span><br><span class="line"> //说明</span><br><span class="line"> .description('这里是我的简历详情！')</span><br><span class="line"> //resume的子命令</span><br><span class="line"> .option("-n, --name <mode>", "输出我的名字")</span><br><span class="line"> //注册一个callback函数</span><br><span class="line"> .action(function(cmd, options){</span><br><span class="line"> var nm = typeof options.name=='string'?options.name:""</span><br><span class="line"></span><br><span class="line"> console.log('resume "%s" 使用 %s 模式', cmd, nm);</span><br><span class="line"> }).on('--help', function() {</span><br><span class="line"> //这里输出子命令的帮助</span><br><span class="line"> console.log(' Examples:');</span><br><span class="line"> console.log(' 运行方法：');</span><br><span class="line"> console.log(' $ ./bin/wcj.js resume ss -n aaaaa');</span><br><span class="line"> console.log(' $ ./bin/wcj.js resume ss');</span><br><span class="line"> console.log();</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br></pre></td></tr></table></figure>
<p>上面实例运行输出方式</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">$ ./bin/wcj.js resume ss -n aaaaa #输出： resume "ss" 使用 aaaaa 模式 $ ./bin/wcj.js resume ss #输出： resume "aa" 使用 模式</span><br></pre></td></tr></table></figure>
<h2 id="事件监听">事件监听</h2><p>命名多少个命令就监听多少命令，<code>--help</code> 为默认监听事件。</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">program.on('--help', function(argv,test){ process.exit(1); });</span><br></pre></td></tr></table></figure>
<h1 id="yargs">yargs</h1><p>命令行框架 <code>yargs</code> 和你的程序实现交互 <a href="https://github.com/bcoe/yargs" target="_blank" rel="external">yargs for github</a> </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).argv;</span><br><span class="line"><span class="keyword">if</span> (argv.l == <span class="string">'zh-cn'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'Chinese site!'</span>);</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(argv.l == <span class="string">'en'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'English website!'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>使用 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).argv;</span><br><span class="line"><span class="keyword">if</span> (argv.l == <span class="string">'zh-cn'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'Chinese site!'</span>);</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(argv.l == <span class="string">'en'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'English website!'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="阅读参考">阅读参考</h1><p>第一个小实例看了很多文章，记录一下，感觉非常简单的样子。</p>
<ul>
<li><a href="http://binbinliao.com/programming/commandline-nodejs.html" target="_blank" rel="external">用node.js开发命令行工具</a></li>
<li><a href="http://cruft.io/posts/node-command-line-utilities/" target="_blank" rel="external">Command-line utilities with Node.js</a></li>
<li><a href="http://zdan.me/post/2015/04/23/build-commands-with-nodejs.html" target="_blank" rel="external">使用Node.js创建命令行工具</a></li>
<li><a href="https://github.com/tj/commander.js" target="_blank" rel="external">commander.js</a></li>
<li><a href="http://tj.github.io/commander.js/" target="_blank" rel="external">commander.js例子</a></li>
<li><a href="https://github.com/substack/node-optimist" target="_blank" rel="external">node-optimist</a></li>
</ul>
]]></content>
<summary type="html">
<![CDATA[<h1 id="wcj">wcj</h1><p><a href="https://github.com/jaywcjlove/wcj/issues" target="_blank" rel="external"><img src="https://img.shields.io/g]]>
</summary>
<category term="commander" scheme="http://jslite.io/tags/commander/"/>
<category term="nodejs" scheme="http://jslite.io/tags/nodejs/"/>
</entry>
<entry>
<title><![CDATA[强制转换时区显示时间]]></title>
<link href="http://jslite.io/2015/06/19/%E5%BC%BA%E5%88%B6%E8%BD%AC%E6%8D%A2%E6%97%B6%E5%8C%BA/"/>
<id>http://jslite.io/2015/06/19/强制转换时区/</id>
<published>2015-06-18T21:55:07.000Z</published>
<updated>2015-06-19T01:23:13.000Z</updated>
<content type="html"><![CDATA[<p>强制转换时区显示时间</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var d = new Date(); var date = new Date(1434701732*1000 + d.getTimezoneOffset() * 60 * 1000 + 8 * 60 * 60 * 1000 ) console.log(date)</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<p>强制转换时区显示时间</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var d = new Date(); var date = new]]>
</summary>
<category term="js" scheme="http://jslite.io/tags/js/"/>
</entry>
<entry>
<title><![CDATA[JS实现浏览器的title闪烁、滚动、声音提示、通知]]></title>
<link href="http://jslite.io/2015/05/12/JS%E5%AE%9E%E7%8E%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84title%E9%97%AA%E7%83%81%E3%80%81%E6%BB%9A%E5%8A%A8%E3%80%81%E5%A3%B0%E9%9F%B3%E3%80%81chrome%E9%80%9A%E7%9F%A5/"/>
<id>http://jslite.io/2015/05/12/JS实现浏览器的title闪烁、滚动、声音、chrome通知/</id>
<published>2015-05-12T12:48:10.000Z</published>
<updated>2015-05-14T08:39:45.000Z</updated>
<content type="html"><![CDATA[<h1 id="通知">通知</h1><p><a href="https://github.com/jaywcjlove/iNotify/issues" target="_blank" rel="external"><img src="https://img.shields.io/github/issues/jaywcjlove/iNotify.svg" alt=""></a> <a href="https://github.com/jaywcjlove/iNotify/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/iNotify.svg" alt=""></a> <a href="https://github.com/jaywcjlove/iNotify/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/iNotify.svg" alt=""></a> <a href="https://github.com/jaywcjlove/iNotify/releases" target="_blank" rel="external"><img src="https://img.shields.io/github/release/jaywcjlove/iNotify.svg" alt=""></a></p>
<p>JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知</p>
<p>这是重复造轮子…，标题闪烁、或者滚动提示，favicon数字显示。打开chrome浏览器调试工具，按照下面截图的方式放到调试里面调用一下，你就可以看到效果了。</p>
<p><img src="https://github.com/jaywcjlove/iNotify/blob/master/iNotify.png?raw=true" alt="界面预览"></p>
<h2 id="下载">下载</h2><h3 id="npm">npm</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install title-notify</span><br></pre></td></tr></table></figure>
<h3 id="bower">bower</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ bower install inotify</span><br></pre></td></tr></table></figure>
<h2 id="init">init</h2><p>effect: flash | scroll | favicon </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.init({</span><br><span class="line"> message: <span class="string">'有消息了。'</span>,<span class="comment">//标题</span></span><br><span class="line"> effect: <span class="string">'flash'</span>, <span class="comment">// flash | scroll 闪烁还是滚动</span></span><br><span class="line"> <span class="comment">//可选播放声音</span></span><br><span class="line"> audio:{</span><br><span class="line"> file: <span class="string">'msg.mp4'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//标题闪烁，或者滚动速度</span></span><br><span class="line"> interval: <span class="number">1000</span>,</span><br><span class="line"> <span class="comment">//可选，默认绿底白字的 Favicon</span></span><br><span class="line"> updateFavicon:{</span><br><span class="line"> <span class="comment">// favicon 字体颜色</span></span><br><span class="line"> textColor: <span class="string">"#fff"</span>,</span><br><span class="line"> <span class="comment">//背景颜色，设置背景颜色透明，将值设置为“transparent”</span></span><br><span class="line"> backgroundColor: <span class="string">"#2F9A00"</span> </span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//可选chrome浏览器通知，默认不填写就是下面的内容</span></span><br><span class="line"> notification:{</span><br><span class="line"> title:<span class="string">"通知！"</span>,<span class="comment">//设置标题</span></span><br><span class="line"> icon:<span class="string">""</span>,<span class="comment">//设置图标 icon 默认为 Favicon</span></span><br><span class="line"> body:<span class="string">'您来了一条新消息'</span><span class="comment">//设置消息内容</span></span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="声音设置">声音设置</h2><h3 id="player">player</h3><p>播放声音</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.player()</span><br></pre></td></tr></table></figure>
<h3 id="loopPlay">loopPlay</h3><p>自动播放声音</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.loopPlay()</span><br></pre></td></tr></table></figure>
<h3 id="stopPlay">stopPlay</h3><p>停止播放声音</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.stopPlay()</span><br></pre></td></tr></table></figure>
<h3 id="setURL">setURL</h3><p>设置播放声音URL</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.setURL()</span><br></pre></td></tr></table></figure>
<h2 id="title通知">title通知</h2><h3 id="setTitle">setTitle</h3><p>设置标题 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.setTitle(<span class="string">'新标题'</span>)</span><br></pre></td></tr></table></figure>
<h3 id="setInterval">setInterval</h3><p>设置时间间隔 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.setInterval(<span class="number">2000</span>)</span><br></pre></td></tr></table></figure>
<h3 id="addTimer">addTimer</h3><p>添加计数器</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.addTimer()</span><br></pre></td></tr></table></figure>
<h3 id="clearTimer">clearTimer</h3><p>清除计数器 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.clearTimer()</span><br></pre></td></tr></table></figure>
<h2 id="favicon通知">favicon通知</h2><h3 id="setFavicon">setFavicon</h3><p>设置icon 显示数字</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.setFavicon(<span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<h3 id="faviconClear">faviconClear</h3><p>清除数字显示原来的icon</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.faviconClear()</span><br></pre></td></tr></table></figure>
<h2 id="chrome通知">chrome通知</h2><h3 id="notify">notify</h3><p>弹出chrome通知，不传参数为预设值…</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">iNotify.notify(); </span><br><span class="line">iNotify.notify({</span><br><span class="line"> title:<span class="string">"新通知"</span></span><br><span class="line"> body:<span class="string">"打雷啦，下雨啦..."</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="其它">其它</h2><p><code>iNotify.init().title;</code> 获取标题</p>
<h2 id="例子">例子</h2><h3 id="实例一">实例一</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">iconNotify</span>(<span class="params">num</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(!notify) {</span><br><span class="line"> <span class="keyword">var</span> notify = iNotify.init({</span><br><span class="line"> effect: <span class="string">'flash'</span>,</span><br><span class="line"> interval: <span class="number">500</span></span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(num===<span class="number">0</span>){</span><br><span class="line"> notify.faviconClear()</span><br><span class="line"> notify.setTitle();</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(num<<span class="number">100</span>){</span><br><span class="line"> notify.setFavicon(num)</span><br><span class="line"> notify.setTitle(<span class="string">"有新消息！"</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(num><span class="number">99</span>){</span><br><span class="line"> notify.setFavicon(<span class="string">'..'</span>)</span><br><span class="line"> notify.setTitle(<span class="string">"有新消息！"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="实例二">实例二</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> notify = iNotify.init({</span><br><span class="line"> effect: <span class="string">'flash'</span>,</span><br><span class="line"> interval: <span class="number">500</span></span><br><span class="line">});</span><br><span class="line">notify.setFavicon(<span class="string">"1"</span>)</span><br></pre></td></tr></table></figure>
<h3 id="实例三">实例三</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iN = iNotify.init({</span><br><span class="line"> effect: <span class="string">'flash'</span>,</span><br><span class="line"> interval: <span class="number">500</span>,</span><br><span class="line"> message:<span class="string">"有消息拉！"</span>,</span><br><span class="line"> updateFavicon:{<span class="comment">//可选，默认绿底白字</span></span><br><span class="line"> textColor: <span class="string">"#fff"</span>,<span class="comment">// favicon 字体颜色</span></span><br><span class="line"> backgroundColor: <span class="string">"#2F9A00"</span> <span class="comment">//背景颜色</span></span><br><span class="line"> }</span><br><span class="line">}).setFavicon(<span class="number">10</span>);</span><br></pre></td></tr></table></figure>
<h3 id="实例四">实例四</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iN = iNotify.init().setFavicon(<span class="number">5</span>);</span><br></pre></td></tr></table></figure>
<h3 id="实例五">实例五</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iN = iNotify.init({</span><br><span class="line"> effect: <span class="string">'flash'</span>,</span><br><span class="line"> interval: <span class="number">500</span>,</span><br><span class="line"> message:<span class="string">"有消息拉！"</span>,</span><br><span class="line"> audio:{</span><br><span class="line"> file: <span class="string">'msg.mp4'</span></span><br><span class="line"> }</span><br><span class="line">}).setFavicon(<span class="number">10</span>).player();</span><br></pre></td></tr></table></figure>
<h3 id="实例五-1">实例五</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iN = iNotify.init({</span><br><span class="line"> effect: <span class="string">'flash'</span>,</span><br><span class="line"> interval: <span class="number">500</span>,</span><br><span class="line"> message:<span class="string">"有消息拉！"</span>,</span><br><span class="line"> audio:{</span><br><span class="line"> file: <span class="string">'msg.mp4'</span></span><br><span class="line"> },</span><br><span class="line"> notification:{</span><br><span class="line"> title:<span class="string">"通知！"</span>,</span><br><span class="line"> icon:<span class="string">""</span>,</span><br><span class="line"> body:<span class="string">'您来了一条新消息'</span></span><br><span class="line"> }</span><br><span class="line">}).setFavicon(<span class="number">10</span>).player();</span><br><span class="line"></span><br><span class="line"><span class="comment">//弹出chrome通知，不传参数为预设值...</span></span><br><span class="line">iN.notify(); </span><br><span class="line"></span><br><span class="line">iN.notify({</span><br><span class="line"> title:<span class="string">"新通知"</span></span><br><span class="line"> body:<span class="string">"打雷啦，下雨啦..."</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<![CDATA[<h1 id="通知">通知</h1><p><a href="https://github.com/jaywcjlove/iNotify/issues" target="_blank" rel="external"><img src="https://img.shields.io]]>
</summary>
<category term="js" scheme="http://jslite.io/tags/js/"/>
</entry>
<entry>
<title><![CDATA[Gulp教程-前端自动管理工具]]></title>
<link href="http://jslite.io/2015/05/07/Gulp%E6%95%99%E7%A8%8B-%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/"/>
<id>http://jslite.io/2015/05/07/Gulp教程-前端自动管理工具/</id>
<published>2015-05-07T07:08:20.000Z</published>
<updated>2015-05-07T09:00:31.000Z</updated>
<content type="html"><![CDATA[<p>Gulp与Grunt一样，也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道（pipe）思想，很多人认为，在操作上，它要比Grunt简单。</p>
<h1 id="安装">安装</h1><p>进入相关项目目录。</p>
<p><code>npm install -g gulp</code> 全局安装 </p>
<h1 id="gulpfile-js">gulpfile.js</h1><h2 id="gulp本地安装">gulp本地安装</h2><p><code>npm install --save-dev gulp</code> 本地模块安装 </p>
<h2 id="js中添加任务">js中添加任务</h2><p>项目根目录中的 <code>gulpfile.js</code>，是Gulp的配置文件。它大概是下面的样子。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h1 id="gulp-uglify">gulp-uglify</h1><p>压缩源码，先安装 <code>gulp-uglify</code> 这个模块。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install --save-dev gulp-uglify</span><br></pre></td></tr></table></figure>
<p>gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务。task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，然后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> gulp.src(<span class="string">'./src/*.js'</span>)</span><br><span class="line"> .pipe(uglify())</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./build/'</span>));</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>注意 必须有一个默认的 <code>default</code> 任务。src方法读入文件产生数据流，dest方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。 </p>
<p><code>js/app.js</code>：指定确切的文件名。<br><code>js/*.js</code>：某个目录所有后缀名为js的文件。<br><code>js/**/*.js</code>：某个目录及其所有子目录中的所有后缀名为js的文件。<br><code>!js/app.js</code>：除了js/app.js以外的所有文件。<br><code>*.+(js|css)</code>：匹配项目根目录下，所有后缀名为js或css的文件。 </p>
<h1 id="gulp-rename">gulp-rename</h1><p>重命名<a href="https://github.com/hparra/gulp-rename" target="_blank" rel="external">gulp-rename</a></p>
<h2 id="安装-1">安装</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install --save-dev gulp-rename</span><br></pre></td></tr></table></figure>
<h2 id="修改_gulpfile_文件">修改 gulpfile 文件</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>),</span><br><span class="line"> rename = <span class="built_in">require</span>(<span class="string">'gulp-rename'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> gulp.src(<span class="string">'./src/iNotify.js'</span>)</span><br><span class="line"> .pipe(uglify())</span><br><span class="line"> .pipe(rename({</span><br><span class="line"> extname:<span class="string">'.min.js'</span></span><br><span class="line"> }))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./build/'</span>));</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h1 id="gulp-watch">gulp-watch</h1><p>gulp模块的watch方法，用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>),</span><br><span class="line"> rename = <span class="built_in">require</span>(<span class="string">'gulp-rename'</span>)</span><br><span class="line"> watch = <span class="built_in">require</span>(<span class="string">'gulp-watch'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//默认执行default任务，并执行监听任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watch'</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"> <span class="comment">// gulp.start('styles', 'scripts', 'images');</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">//watch任务：侦听js文件执行 build 任务</span></span><br><span class="line">gulp.task(<span class="string">'watch'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> gulp.watch(<span class="string">'src/*.js'</span>, [<span class="string">'build'</span>]);<span class="comment">//侦听js文件执行 build 任务</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">//build任务：压缩js | js重命名 | 压缩</span></span><br><span class="line">gulp.task(<span class="string">'build'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"> gulp.src(<span class="string">'./src/iNotify.js'</span>)</span><br><span class="line"> .pipe(uglify())</span><br><span class="line"> .pipe(rename({</span><br><span class="line"> extname:<span class="string">'.min.js'</span></span><br><span class="line"> }))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./build/'</span>));</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h1 id="gulp-load-plugins">gulp-load-plugins</h1><p>这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写，就是下面这样。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>),</span><br><span class="line"> gulpLoadPlugins = <span class="built_in">require</span>(<span class="string">'gulp-load-plugins'</span>),</span><br><span class="line"> plugins = gulpLoadPlugins();</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'js'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'js/*.js'</span>)</span><br><span class="line"> .pipe(plugins.jshint())</span><br><span class="line"> .pipe(plugins.jshint.reporter(<span class="string">'default'</span>))</span><br><span class="line"> .pipe(plugins.uglify())</span><br><span class="line"> .pipe(plugins.concat(<span class="string">'app.js'</span>))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'build'</span>));</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>上面代码假设package.json文件包含以下内容。<br><figure class="highlight json"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> "<span class="attribute">devDependencies</span>": <span class="value">{</span><br><span class="line"> "<span class="attribute">gulp-concat</span>": <span class="value"><span class="string">"~2.2.0"</span></span>,</span><br><span class="line"> "<span class="attribute">gulp-uglify</span>": <span class="value"><span class="string">"~0.2.1"</span></span>,</span><br><span class="line"> "<span class="attribute">gulp-jshint</span>": <span class="value"><span class="string">"~1.5.1"</span></span>,</span><br><span class="line"> "<span class="attribute">gulp</span>": <span class="value"><span class="string">"~3.5.6"</span></span><br><span class="line"> </span>}</span><br><span class="line"></span>}</span><br></pre></td></tr></table></figure></p>
<h1 id="参考地址">参考地址</h1><p><a href="http://gulpjs.com/" target="_blank" rel="external">gulpjs.com</a><br><a href="http://gulpjs.com/plugins/" target="_blank" rel="external">plugins</a> </p>
]]></content>
<summary type="html">
<![CDATA[<p>Gulp与Grunt一样，也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道（pipe）思想，很多人认为，在操作上，它要比Grunt简单。</p>
<h1 id="安装">安装</h1><p>进入相关项目目录。</p>
<p><code>npm install -g]]>
</summary>
<category term="gulp" scheme="http://jslite.io/tags/gulp/"/>
<category term="nodejs" scheme="http://jslite.io/tags/nodejs/"/>
<category term="tools" scheme="http://jslite.io/tags/tools/"/>
</entry>
<entry>
<title><![CDATA[提交自己的包到bower、npm中]]></title>
<link href="http://jslite.io/2015/05/03/%E6%8F%90%E4%BA%A4%E8%87%AA%E5%B7%B1%E5%8C%85%E5%88%B0bower%E3%80%81npm%E4%B8%AD/"/>
<id>http://jslite.io/2015/05/03/提交自己包到bower、npm中/</id>
<published>2015-05-02T17:01:49.000Z</published>
<updated>2015-05-06T15:09:17.000Z</updated>
<content type="html"><![CDATA[<h1 id="bower">bower</h1><p>Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。 </p>
<p><a href="http://bower.io/" target="_blank" rel="external">bower官网</a> </p>
<h2 id="安装Bower">安装Bower</h2><p>一旦你已经安装了上面所说的所有必要文件，键入以下命令安装Bower：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install -g bower</span><br></pre></td></tr></table></figure>
<p>这行命令是Bower的全局安装，-g 操作表示全局。</p>
<h2 id="使用bower">使用bower</h2><ol>
<li>直接下载 git 库: <code>bower install git://github.com/JSLite/JSLite.git</code> </li>
<li>github别名自动解析git库: <code>bower install JSLite/JSLite</code> </li>
<li>下载线上的任意文件: <code>bower install http://foo.com/jquery.awesome-plugin.js</code> </li>
<li>下载本地库: <code>bower install ./repos/jquery</code></li>
</ol>
<h2 id="常用命令">常用命令</h2><p><code>$ bower install jquery --save</code> 添加依赖并更新bower.json文件<br><code>$ bower cache clean</code> 安装失败清除缓存<br><code>$ bower install storejs</code> 安装storejs<br><code>$ bower uninstall storejs</code> 卸载storejs </p>
<h2 id="注册">注册</h2><h3 id="添加配置文件">添加配置文件</h3><p>bower.json文件的使用可以让包的安装更容易，你可以在应用程序的根目录下创建一个名为 <code>bower.json</code> 的文件，并定义它的依赖关系。使用<code>bower init</code> 命令来创建<code>bower.json</code>文件：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ bower init ? name: store.js ? version: 1.0.1 ? description: "本地存储localstorage的封装，提供简单的AIP" ? authors: (kenny.wang <wowohoo@qq.co>) ? license: MIT ? homepage: ? set currently installed components as dependencies?: Yes ? add commonly ignored files to ignore list?: Yes ? would you like to mark this package as private which prevents it from being accidentally publis? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No { name: 'store.js', main: 'store.js', version: '1.0.1', authors: [ '(kenny.wang <wowohoo@qq.co>)' ], description: '"本地存储localstorage的封装，提供简单的AIP"', moduleType: [ 'amd', 'node' ], keywords: [ 'storejs' ], license: 'MIT', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ? Looks good?: Yes</span><br></pre></td></tr></table></figure>
<h3 id="注册自己的包">注册自己的包</h3><p>可以注册自己的包，这样其他人也可以使用了，这个操作只是在服务器上保存了一个隐射，服务器本身不托管代码。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">bower register storejs git://github.com/jaywcjlove/store.js.git</span><br></pre></td></tr></table></figure>
<h1 id="npm">npm</h1><p>npm全称Node Package Manager，是node.js的模块依赖管理工具。使用github管理NPM包的代码，并定期提交至NPM服务器；<br><a href="https://www.npmjs.com/" target="_blank" rel="external">npm官网</a> </p>
<h2 id="提交自己开发的NPM包">提交自己开发的NPM包</h2><h3 id="创建package-json文件">创建package.json文件</h3><p>package.json文件的使用可以让包的安装更容易，你可以在应用程序的根目录下创建一个名为 <code>package.json</code> 的文件，并定义它的依赖关系。使用<code>npm init</code> 命令来创建<code>package.json</code>文件：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (store.js) version: (1.0.0) description: Local storage localstorage package provides a simple API entry point: (store.js) test command: store.js git repository: (https://github.com/jaywcjlove/store.js.git) keywords: store.js author: (kenny.wang <wowohoo@qq.co>) license: (ISC) MIT About to write to /Applications/XAMPP/xamppfiles/htdocs/git/github.com/myJS/store.js/package.json: { "name": "store.js", "version": "1.0.0", "description": "Local storage localstorage package provides a simple API", "main": "store.js", "scripts": { "test": "store.js" }, "repository": { "type": "git", "url": "https://github.com/jaywcjlove/store.js.git" }, "keywords": [ "store.js" ], "author": " <wowohoo@qq.co> (kenny.wang <wowohoo@qq.co>)", "license": "MIT", "bugs": { "url": "https://github.com/jaywcjlove/store.js/issues" }, "homepage": "https://github.com/jaywcjlove/store.js" } Is this ok? (yes) yes</span><br></pre></td></tr></table></figure>
<h2 id="发布到线上">发布到线上</h2><h3 id="添加用户">添加用户</h3><p>按照提示输入用户名，密码和邮箱</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm adduser</span><br></pre></td></tr></table></figure>
<h3 id="登陆用户">登陆用户</h3><p>按照提示输入用户名，密码和邮箱</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm login</span><br></pre></td></tr></table></figure>
<h3 id="发布">发布</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm publish</span><br></pre></td></tr></table></figure>
<p>如果不带参数，则会在当前目录下查找package.json文件，按照该文件描述信息发布；<br>如果指定目录，就会在指定目录下查找package.json文件<br>测试是否发布成功，在官网搜索一下<a href="https://www.npmjs.com/" target="_blank" rel="external">www.npmjs.com</a> </p>
<p>注： <code>package.json</code> 中的<code>name</code>不要又特殊字符哦 </p>
<h4 id="版本更新">版本更新</h4><p>修改package.json里的版本号，重新npm publish</p>
<h4 id="取消发布">取消发布</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm unpublish</span><br></pre></td></tr></table></figure>
<h2 id="其它命令">其它命令</h2><p><code>npm install storejs</code> 下载使用<br><code>npm config set registry https://registry.npm.taobao.org</code> 更换镜像地址<br><code>npm config get registry</code> 获取镜像地址<br><code>npm dist-tag ls jslite</code> 查看当前版本<br><code>npm dedupe</code> 尽量压平依赖树 </p>
<h2 id="国内优秀npm镜像">国内优秀npm镜像</h2><p>由于npm的源在国外，所以国内用户使用起来各种不方便。<br><a href="http://segmentfault.com/a/1190000000491162" target="_blank" rel="external">利用kappa搭建私有NPM仓库</a> </p>
<h3 id="淘宝npm镜像">淘宝npm镜像</h3><ol>
<li>搜索地址：<a href="http://npm.taobao.org/" target="_blank" rel="external">http://npm.taobao.org/</a></li>
<li>registry地址：<a href="http://registry.npm.taobao.org/" target="_blank" rel="external">http://registry.npm.taobao.org/</a></li>
</ol>
<h3 id="cnpmjs镜像">cnpmjs镜像</h3><ol>
<li>搜索地址：<a href="http://cnpmjs.org/" target="_blank" rel="external">http://cnpmjs.org/</a></li>
<li>registry地址：<a href="http://r.cnpmjs.org/" target="_blank" rel="external">http://r.cnpmjs.org/</a></li>
</ol>
<h3 id="临时使用">临时使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm --registry https://registry.npm.taobao.org install express</span><br></pre></td></tr></table></figure>
<h3 id="持久使用">持久使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm config set registry https://registry.npm.taobao.org // 配置后可通过下面方式来验证是否成功 npm config get registry // 或 npm info express</span><br></pre></td></tr></table></figure>
<h3 id="通过cnpm使用">通过cnpm使用</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org // 使用 cnpm install expresstall express</span><br></pre></td></tr></table></figure>
<h1 id="spmjs">spmjs</h1><p><a href="http://spmjs.io" target="_blank" rel="external">spmjs</a></p>
<p>据说已经不更新了，日后如果有研究再补充！</p>
]]></content>
<summary type="html">
<![CDATA[<h1 id="bower">bower</h1><p>Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。 </p>
<p><a href="http:]]>
</summary>
<category term="bower" scheme="http://jslite.io/tags/bower/"/>
<category term="npm" scheme="http://jslite.io/tags/npm/"/>
</entry>
<entry>
<title><![CDATA[js面向对象编程]]></title>
<link href="http://jslite.io/2015/04/30/js%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/"/>
<id>http://jslite.io/2015/04/30/js面向对象编程/</id>
<published>2015-04-30T02:47:55.000Z</published>
<updated>2015-05-02T15:39:02.000Z</updated>
<content type="html"><![CDATA[<p>这个是学习<a href="http://www.ruanyifeng.com/" target="_blank" rel="external">阮一峰</a>老师发的Javascript 面向对象编程教程，然后转载过来的文章，目的是为进入靠近大牛更近一点，对于一直面向过程写js偶尔用一下，当初封装<a href="http://jslite.io">JSLite.io</a>就是学习的阮一峰这文章哦，用得一知半解，想升华一下，最近一直封装各种库重新温习巩固系统的学习一下。</p>
<a id="more"></a>
<h1 id="转载原地址">转载原地址</h1><p>阮一峰 </p>
<p><a href="http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html" target="_blank" rel="external">Javascript面向对象编程（一）：封装</a><br><a href="http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html" target="_blank" rel="external">Javascript面向对象编程（二）：构造函数的继承</a><br><a href="http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html" target="_blank" rel="external">Javascript面向对象编程（三）：非构造函数的继承</a> </p>
<h1 id="封装">封装</h1><p>Javascript 是一种基于对象（object-based）的语言，一切皆对象。虽然新版的ES6有class(类)，但是它只是个语法糖而已，所以它不是一种正真的面向对象（OOP）语言。 </p>
<p>如果需要把<code>属性</code>（property）和<code>方法</code>（method）封装成一个对象，我们要重原型对象生成一个实例对象，应该怎么做呢？</p>
<h2 id="生成对象的原始模式">生成对象的原始模式</h2><p>假设我们把猫看成一个对象，它有 <code>名字</code> 和 <code>颜色</code> 两个属性。 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Cat = {</span><br><span class="line"> name:<span class="string">""</span>,</span><br><span class="line"> color:<span class="string">""</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>现在，我们需要根据这个原型对象的规格（schema），生成两个实例对象。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cat1={};<span class="comment">//创建一个空对象</span></span><br><span class="line"> cat1.name=<span class="string">"大毛"</span>;</span><br><span class="line"> cat1.color=<span class="string">"黄毛"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cat2 = {};</span><br><span class="line"> cat2.name = <span class="string">"二毛"</span>;</span><br><span class="line"> cat2.color = <span class="string">"黑色"</span>;</span><br></pre></td></tr></table></figure>
<p>进入简单的封装了，把连个属性封装到一个对象里面。但是这里面又俩缺点：</p>
<ol>
<li>如果多生成几个实例，写起来就非常麻烦</li>
<li>实例与原型之间，没有任何办法，可以看出什么关联</li>
</ol>
<h2 id="原始模式的改进">原始模式的改进</h2><p>我们可以写一个函数，解决代码重复的问题。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> name:name,</span><br><span class="line"> color:color</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>然后生成实例对象，对于是调用函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cat1 = Cat(<span class="string">'大毛'</span>,<span class="string">'黄毛'</span>);</span><br><span class="line"><span class="keyword">var</span> cat2 = Cat(<span class="string">'二毛'</span>,<span class="string">'黑色'</span>);</span><br></pre></td></tr></table></figure>
<p>这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出他们是统一个原型对象的实例。</p>
<h2 id="构造函数模式">构造函数模式</h2><p>为了解决从圆形对象生成实例的问题，javascript 提供了一个构造函数（Constructor）模式。 </p>
<p>所谓的<code>构造函数</code> ， 其实是一个普通的函数，但是内部使用了 <code>this</code> 变量。对构造函数使用<code>new</code> 运算符，就能生成实例，并且<code>this</code> 变量会绑定在实例对象上。 </p>
<p>比如，猫的原型对象现在可以这样写：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>现在可以生成实例对象了。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="keyword">var</span> cat2 = <span class="keyword">new</span> Cat(<span class="string">'二毛'</span>,<span class="string">'黑色'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(cat1.name); <span class="comment">//==> 黄毛</span></span><br><span class="line"><span class="built_in">console</span>.log(cat1.color); <span class="comment">//==> 大黄</span></span><br></pre></td></tr></table></figure>
<p>这个时候 <code>cat1</code> 和 <code>cat2</code> 会自动含有一个 <code>constructor</code> 属性，指向它们的构造函数。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.constructor == Cat); <span class="comment">//==> true</span></span><br><span class="line"><span class="built_in">console</span>.log(cat2.constructor == Cat); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<p>javascript 还提供了一个 <code>instanceof</code> 运算符，验证原型对象与实例对象之间的关系。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1 <span class="keyword">instanceof</span> Cat); <span class="comment">//==> true</span></span><br><span class="line"><span class="built_in">console</span>.log(cat2 <span class="keyword">instanceof</span> Cat); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<h2 id="构造函数模式的问题">构造函数模式的问题</h2><p>构造函数方法很好用，但是存在一个浪费内存的问题。 </p>
<p>请看，我们现在为<code>Cat</code>对象添加一个不变的属性 <code>type</code> (种类)，再添加一个方法 <code>eat</code> (吃老鼠)。那么，原型对象 <code>Cat</code> 就变成了下面这样：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line"> <span class="keyword">this</span>.type = <span class="string">"猫科动物"</span>;</span><br><span class="line"> <span class="keyword">this</span>.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ <span class="built_in">console</span>.log(<span class="string">'吃老鼠'</span>) };</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>还是采用相同的方法，生成实例：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cat1 =<span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="keyword">var</span> cat2 =<span class="keyword">new</span> Cat(<span class="string">'二毛'</span>,<span class="string">'黑色'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.type); <span class="comment">//==>猫科动物</span></span><br><span class="line">cat1.eat(); <span class="comment">//==> 吃老鼠</span></span><br></pre></td></tr></table></figure>
<p>表面上好像没有什么问题，但是实际上这样做，又个很大的弊端。那就是对于每一个实例对象，type 属性和eat() 方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.eat == cat2.eat); <span class="comment">//=> false</span></span><br></pre></td></tr></table></figure>
<p>能补能让type 属性和eat()方法再内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。（哈哈不是我回答的，阮一峰老师回答的）</p>
<h2 id="Prototype模式">Prototype模式</h2><p>javascript 规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，，都会被构造函数的实体继承。 </p>
<p>这就意味着，我们可以把那些不变的属性和方法，直接定义在 prototype 对象上。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line">}</span><br><span class="line">Cat.prototype.type = <span class="string">"猫科动物"</span>; </span><br><span class="line">Cat.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ <span class="built_in">console</span>.log(<span class="string">"吃老鼠"</span>) }</span><br></pre></td></tr></table></figure>
<p>然后生成实例。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="keyword">var</span> cat2 = <span class="keyword">new</span> Cat(<span class="string">'二毛'</span>,<span class="string">'黑色'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.type); <span class="comment">//==> 猫科动物</span></span><br><span class="line">cat1.eat(); <span class="comment">//==> 吃老鼠</span></span><br></pre></td></tr></table></figure>
<p>这样所有实例的 type 属性和 eat() 方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.eat == cat2.eat); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<h2 id="Prototype模式的验证方法">Prototype模式的验证方法</h2><p>未了配合prototype属性，javascript定义了一些辅助方法，帮助我们使用。</p>
<h3 id="isPrototypeOf()">isPrototypeOf()</h3><p>这个方法来判断，某个prototype 对象和某个实例之间的关系。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Cat.prototype.isPrototypeOf(cat1)); <span class="comment">//==> true</span></span><br><span class="line"><span class="built_in">console</span>.log(Cat.prototype.isPrototypeOf(cat2)); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<h3 id="hasOwnProperty()">hasOwnProperty()</h3><p>每个实例对象都有一个 hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype 对象的属性。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.hasOwnProperty(<span class="string">'name'</span>)); <span class="comment">//==> true</span></span><br><span class="line"><span class="built_in">console</span>.log(cat1.hasOwnProperty(<span class="string">'type'</span>)); <span class="comment">//==> false</span></span><br></pre></td></tr></table></figure>
<h3 id="in_运算符">in 运算符</h3><p>in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'name'</span> <span class="keyword">in</span> cat1); <span class="comment">//==> true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'type'</span> <span class="keyword">in</span> cat1); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<p>in运算符黑可以用来遍历某个对象的所有属性。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> cat1){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"cat1["</span>+prop+<span class="string">"]="</span>+cat1[prop])</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="构造函数的继承">构造函数的继承</h1><p>这一部分主要介绍的是，对象之间的 <code>继承</code> 的五种方法。比如，现在有一个 <code>动物</code> 对象的构造函数。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.species = <span class="string">"动物"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>还有个<code>猫</code> 对象的构造函数。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如何才能使 <code>猫</code> 继承 <code>动物</code> 呢？</p>
<h2 id="构造函数绑定">构造函数绑定</h2><p>第一种方法也是最简单的方法，使用 <code>call</code> 或 <code>apply</code> 方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Cat</span>(<span class="params">name,color</span>)</span>{</span><br><span class="line"> Animal.apply(<span class="keyword">this</span>,<span class="built_in">arguments</span>);</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.species); <span class="comment">//==> 动物</span></span><br></pre></td></tr></table></figure>
<h2 id="prototype模式">prototype模式</h2><p>第二种方法便常见，使用 prototype 属性。<br>如何“猫”的prototype 对象，指向一个 Animal 的实例，那么所有“猫”的实例，就能继承 Animal 了。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Cat.prototype = <span class="keyword">new</span> Animal(); </span><br><span class="line"><span class="comment">//代码第一行，我们将Cat的prototype对象指向一个Animal的实例。</span></span><br><span class="line">Cat.prototype.constructor = Cat;</span><br><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.species); <span class="comment">//==> 动物</span></span><br></pre></td></tr></table></figure>
<p><code>Cat.prototype = new Animal();</code> 这行代码意思是：我们将Cat的prototype对象指向一个Animal的实例。它相当于完全删除了prototype对象原先的值，然后富裕一个新值。</p>
<p><code>Cat.prototype.constructor = Cat;</code> 这行代码意思是：原来，任何一个 <code>prototype</code> 对象都有一个 <code>constructor</code> 属性，指向它的构造函数。如果没有<code>Cat.prototype = new Animal();</code> 这一行，<code>Cat.prototype.constructor</code> 是指向Cat的；加了这一行以后，<code>Cat.prototype.constructor</code> 指向 <code>Animal</code>。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Cat.prototype.constructor == Animal); <span class="comment">//==> true</span></span><br></pre></td></tr></table></figure>
<p>更重要的是，每一个实例也有一个 <code>constructor</code> 属性，默认调用 <code>prototype</code> 对象的 <code>constructor</code> 属性。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.constructor == Cat.prototype.constructor); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>因此，在运行 <code>Cat.prototype = new Animal();</code> 这一行之后，<code>cat1.constructor</code> 也指向 <code>Animal</code> !</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(cat1.constructor == Animal); <span class="comment">//==>true</span></span><br></pre></td></tr></table></figure>
<p>这显然会导致继承链的絮乱(cat1明明是用构造函数Cat生成的)，因此我们必须动手纠正，将 <code>Cat.prototype</code> 对象的 <code>constructor</code> 值改为Cat。这就是第二行的意思。 </p>
<p>这个是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了 <code>prototype</code> 对象，<code>o.prototype = {};</code> 那么，下一步必然是为新的 <code>prototype</code> 对象上加 <code>constructor</code> 属性，并将这个属性指回原来的构造函数。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">o.prototype.constructor = o;</span><br></pre></td></tr></table></figure>
<h2 id="直接继承prototype">直接继承prototype</h2><p>第三种方法是对第二种方法的改进。由于 <code>Animal</code> 对象中，不变的属性都可以直接写入 <code>Animal.prototype</code>。所以，我们也可以让Cat()跳过 Animal()，直接继承 Animal.prototype 。 </p>
<p>现在，我们先将 Animal 对象改写。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>)</span>{}</span><br><span class="line">Animal.prototype.species = <span class="string">"动物"</span>;</span><br></pre></td></tr></table></figure>
<p>然后，将Cat的 <code>prototype</code> 对象，然后指向 Animal 的 prototype 对象，这样就完成了继承。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Cat.prototype = Animal.prototype;</span><br><span class="line">Cat.prototype.constructor = Cat;</span><br><span class="line"><span class="keyword">var</span> cat1= <span class="keyword">new</span> Cat(<span class="string">"大毛"</span>,<span class="string">"黄色"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.species);<span class="comment">//==>动物</span></span><br></pre></td></tr></table></figure>
<p>与前一种方法相比，这样做的有点是效率比较高（不用执行和建立 Animal 的实例了），比较省内存。缺点是 Cat.prototype 和 Animal.prototype 现在只想了同一个对象，那么任何对象 Cat.prototype 的修改，都会反映到 Animal.prototype 。<br>所以，上面这一段代码其实是有问题的。请看第二行</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Cat.prototype.constructor =Cat;</span><br></pre></td></tr></table></figure>
<p>这一句实际上把 Animal.prototype 对象 constructor 属性也改掉了！</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Animal.prototype.constructor); <span class="comment">//=> Cat</span></span><br></pre></td></tr></table></figure>
<h2 id="利用空对象作为中介">利用空对象作为中介</h2><p>由于“直接继承prototype”存在上述的缺点，所以就有第四种方法，利用一个空对象作为中介。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line">F.prototype = Animal.prototype;</span><br><span class="line">Cat.prototype = <span class="keyword">new</span> F();</span><br><span class="line">Cat.prototype.constructor = Cat;</span><br></pre></td></tr></table></figure>
<p>F是空对象，所以几乎占内存。这事，修改 Cat 的 prototype 对象，就不会影响到 Animal 的 prototype 对象。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Animal.prototype.constructor); <span class="comment">//==> Animal</span></span><br></pre></td></tr></table></figure>
<p>我们将上面的方法，封装成一个函数，方便于使用。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">Child,Parent</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line"> F.prototype = Parent.prototype;</span><br><span class="line"> Child.prototype = <span class="keyword">new</span> F();</span><br><span class="line"> Child.prototype.constructor = Child;</span><br><span class="line"> Child.uber = Parent.prototype;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>使用的时候，方法如下</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">extend(Cat,Animal);</span><br><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">'大毛'</span>,<span class="string">'黄色'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.species); <span class="comment">//==> 动物</span></span><br></pre></td></tr></table></figure>
<p>这个 extend 函数，就是 YUI 库如何实现继承的方法。<br>另外，说明一点，函数体最后一行</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Child.uber = Parent.prototype;</span><br></pre></td></tr></table></figure>
<p>意思是为子对象设一个uber 属性，这个属性直接指向父对象的prototype属性。（uber是一个德语词，意思是“向上”、“上一层”。）这等于在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。</p>
<h2 id="拷贝继承">拷贝继承</h2><p>上面采用 <code>prototype</code> 对象，实现继承。我们也可以换一种思路，纯粹采用“拷贝”方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？这样我们有了第五种方法。<br>首先，还是把 Animal 的所有不变属性，都放到它的 prototype 对象上。 </p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>)</span>{}</span><br><span class="line">Animal.prototype.species = <span class="string">"动物"</span>;</span><br></pre></td></tr></table></figure>
<p>然后，再写一个函数，实现属性拷贝的目的。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend2</span>(<span class="params">Child,Parent</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> p = Parent.prototype;</span><br><span class="line"> <span class="keyword">var</span> c = Child.prototype;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> p){</span><br><span class="line"> c[i] = p[i]</span><br><span class="line"> }</span><br><span class="line"> c.uber = p;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这个函数的作用，就是将父对象的prototype 对象中的属性，一一拷贝给 Child 对象的 prototype 对象。 </p>
<p>使用的时候，这样写： </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">extend2(Cat,Animal);</span><br><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> Cat(<span class="string">"大毛"</span>,<span class="string">"黄色"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(cat1.species); <span class="comment">//==> 动物</span></span><br></pre></td></tr></table></figure>
<hr>
<h1 id="非构造函数的继承">非构造函数的继承</h1><h2 id="什么是“非构造函数”的继承？">什么是“非构造函数”的继承？</h2><p>比如，现在有一个对象，叫做“中国人”。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Chinese = {</span><br><span class="line"> nation:<span class="string">"中国"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>还有个对象，叫做“医生”。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Doctor = {</span><br><span class="line"> career:<span class="string">"医生"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>请问怎样才能让“医生” 去继承“中国人”呢？也就是说，我怎样才能生成一个“中国医生”的对象呢？<br>这里要注意，这连个对象都是普通对象，不是构造函数，无法使用构造函数的方法实现“继承”。 </p>
<h2 id="object方法">object方法</h2><p>json格式的发明人 Douglas Crockford，提出了一个object()函数，可以做到这一点。 </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">object</span>(<span class="params">o</span>)</span>{</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>{}</span><br><span class="line"> F.prototype = o;</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这个object()函数，其实只是做一件事，就是把子对象的prototype 属性，指向父对象，从而使得子对象与父对象连在一起使用的时候，第一步先在父对象的基础上，生成子对象：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Doctor = object(Chinese);</span><br></pre></td></tr></table></figure>
<p>然后，再加上子对象本身的属性：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Doctor.career = <span class="string">"医生"</span>;</span><br></pre></td></tr></table></figure>
<p>这时，子对象已经继承了父对象的属性了。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Doctor.nation); <span class="comment">//==>中国</span></span><br></pre></td></tr></table></figure>
<h2 id="浅拷贝">浅拷贝</h2><p>除了使用“prototype链”以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。 </p>
<p>下面这个函数，就是在做拷贝：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">extendCopy</span>(<span class="params">p</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> c = {};</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> p){</span><br><span class="line"> c[i] = p[i]</span><br><span class="line"> }</span><br><span class="line"> c.uber = p;</span><br><span class="line"> <span class="keyword">return</span> c;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>使用的时候，这样写：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Doctor = extendCopy(Chinese);</span><br><span class="line">Doctor.career = <span class="string">"医生"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(Doctor.nation) <span class="comment">//==> 中国</span></span><br></pre></td></tr></table></figure>
<p>但是，这样拷贝有一个问题。那就是，如果父对象的属性等于数组或者另一个对象，那么实际上，子对象获得的只有一个内存地址，而不是真正拷贝，因为存在父对象被篡改的可能。</p>
<p>请看，现在给Chinese 添加一个“出生地”属性，它的值是一个数组。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Chinese.birthPlaces = [<span class="string">"北京"</span>,<span class="string">"上海"</span>,<span class="string">"香港"</span>];</span><br></pre></td></tr></table></figure>
<p>通过 extendCopy() 函数，Doctor 继承了Chinese。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Doctor = extendCopy(Chinese)</span><br></pre></td></tr></table></figure>
<p>然后，我们为 Doctor 的“出生地”添加一个城市：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Doctor.birthPlaces.push(<span class="string">'厦门'</span>);</span><br></pre></td></tr></table></figure>
<p>发生了什么事儿？Chinese的“出生地”也被改掉了！</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Doctor.birthPlaces); <span class="comment">//==> 北京，上海，香港，厦门</span></span><br><span class="line"><span class="built_in">console</span>.log(Chinese.birthPlaces); <span class="comment">//==> 北京，上海，香港，厦门</span></span><br></pre></td></tr></table></figure>
<p>所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做”浅拷贝”。这是早期jQuery实现继承的方式。</p>
<h2 id="深拷贝">深拷贝</h2><p>所谓“深拷贝”，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用“浅拷贝”就行了。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepCopy</span>(<span class="params">p,c</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> c = c || {}</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> p){</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> p[i] == <span class="string">'object'</span>){</span><br><span class="line"> c[i] = (p[i].constructor === <span class="built_in">Array</span>) ? []:{};</span><br><span class="line"> deepCopy(p[i],c[i])</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> c[i] = p[i]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> c;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>使用的时候这样写：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Chinese.birthPlaces = [<span class="string">'北京'</span>,<span class="string">'上海'</span>,<span class="string">'香港'</span>];<span class="comment">//给父对象加一个属性，值为数组。</span></span><br><span class="line"><span class="keyword">var</span> Doctor = deepCopy(Chinese);</span><br></pre></td></tr></table></figure>
<p>然后，再子对象上修改这个属性：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Doctor.birthPlaces.push(<span class="string">'厦门'</span>);</span><br></pre></td></tr></table></figure>
<p>这时，父对象就不会受到影响了。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(Doctor.birthPlaces); <span class="comment">//==> 北京，上海，香港，厦门</span></span><br><span class="line"><span class="built_in">console</span>.log(Chinese.birthPlaces); <span class="comment">//==> 北京，上海，香港</span></span><br></pre></td></tr></table></figure>
<p>目前 我封装的<a href="http://jslite.io">JSLite.io</a> 就是使用的这种继承方法。JQuery 也是用的这种方法哦。</p>
]]></content>
<summary type="html">
<![CDATA[<p>这个是学习<a href="http://www.ruanyifeng.com/">阮一峰</a>老师发的Javascript 面向对象编程教程，然后转载过来的文章，目的是为进入靠近大牛更近一点，对于一直面向过程写js偶尔用一下，当初封装<a href="http://jslite.io">JSLite.io</a>就是学习的阮一峰这文章哦，用得一知半解，想升华一下，最近一直封装各种库重新温习巩固系统的学习一下。</p>]]>
</summary>
<category term="js" scheme="http://jslite.io/tags/js/"/>
</entry>
<entry>
<title><![CDATA[各种设备的CSS3MediaQuery整理及爽歪歪写法]]></title>
<link href="http://jslite.io/2015/04/29/%E5%90%84%E7%A7%8D%E8%AE%BE%E5%A4%87%E7%9A%84CSS3MediaQuery%E6%95%B4%E7%90%86%E5%8F%8A%E7%88%BD%E6%AD%AA%E6%AD%AA%E5%86%99%E6%B3%95/"/>
<id>http://jslite.io/2015/04/29/各种设备的CSS3MediaQuery整理及爽歪歪写法/</id>
<published>2015-04-29T08:20:54.000Z</published>
<updated>2015-04-29T08:50:50.000Z</updated>
<content type="html"><![CDATA[<h2 id="响应式布局">响应式布局</h2><p>响应式布局麻烦之处就是每个尺寸的都要进行css定义，这个真的不是一般的蛋疼，下面有搜集到的各种尺寸css Media Query内容，搜集来源：<a href="https://css-tricks.com/snippets/css/media-queries-for-standard-devices/" target="_blank" rel="external">media-queries-for-standard-devices</a>。 </p>
<p>看了之后是不是非常之蛋疼呢，那么只有使用工具来写这些玩意儿了，俺用得最爽的就是 <code>stylus</code> ，真的爽yy了，如果 <code>stylus</code> 不会玩耍请看这里 <a href="http://jslite.io/2015/04/27/stylus%E8%8F%9C%E9%B8%9F%E5%85%A5%E9%97%A8%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/">stylus入门使用方法</a></p>
<p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// Media queries mq-mobile = "screen and (max-width: 479px)" mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)" mq-iPhones4 = "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" mq-normal = "screen and (min-width: 768px)" .page-number display: inline-block @media mq-mobile display: none @media mq-tablet color:red @media mq-iPhones4 font-size:12px @media mq-normal background:yellow</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="class">.page-number</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">display</span>:<span class="value"> inline-block</span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen and (max-width: <span class="number">479px</span>) </span>{</span><br><span class="line"> <span class="class">.page-number</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">display</span>:<span class="value"> none</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen and (min-width: <span class="number">480px</span>) and (max-width: <span class="number">767px</span>) </span>{</span><br><span class="line"> <span class="class">.page-number</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen and (min-device-width: <span class="number">320px</span>) and (max-device-width: <span class="number">480px</span>) and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"> <span class="class">.page-number</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">12px</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen and (min-width: <span class="number">768px</span>) </span>{</span><br><span class="line"> <span class="class">.page-number</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ff0</span></span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Phones_and_Handhelds">Phones and Handhelds</h2><h3 id="iPhones">iPhones</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- iPhone 4 and 4S ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">480px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">480px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">480px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- iPhone 5 and 5S ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">568px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">568px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">320px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">568px</span>)</span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- iPhone 6 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">375px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">667px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">375px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">667px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: portrait) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">375px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">667px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (orientation: landscape) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- iPhone 6+ ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">414px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">736px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">3</span>) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">414px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">736px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">3</span>)</span><br><span class="line"> and (orientation: portrait) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">414px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">736px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">3</span>)</span><br><span class="line"> and (orientation: landscape) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="Galaxy_Phones">Galaxy Phones</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Galaxy S3 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">2</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">2</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- Galaxy S4 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">320px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- Galaxy S5 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="HTC_Phones">HTC Phones</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- HTC One ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">360px</span>) </span><br><span class="line"> and (device-height: <span class="number">640px</span>) </span><br><span class="line"> and (-webkit-device-pixel-ratio: <span class="number">3</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Tablets">Tablets</h2><h3 id="iPads">iPads</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- iPad mini ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: portrait) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: landscape) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- iPad 1 and 2 ----------- */</span></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: portrait) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: landscape) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- iPad 3 and 4 ----------- */</span></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: portrait) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">768px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1024px</span>) </span><br><span class="line"> and (orientation: landscape) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="Galaxy_Tablets">Galaxy Tablets</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Galaxy Tab 10.1 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> </span><br><span class="line"> (min-device-width: <span class="number">800px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1280px</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> </span><br><span class="line"> (max-device-width: <span class="number">800px</span>) </span><br><span class="line"> and (orientation: portrait) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> </span><br><span class="line"> (max-device-width: <span class="number">1280px</span>) </span><br><span class="line"> and (orientation: landscape) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="Nexus_Tablets">Nexus Tablets</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Asus Nexus 7 ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">601px</span>) </span><br><span class="line"> and (device-height: <span class="number">906px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.331</span>) </span><br><span class="line"> and (-webkit-max-device-pixel-ratio: <span class="number">1.332</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">601px</span>) </span><br><span class="line"> and (device-height: <span class="number">906px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.331</span>) </span><br><span class="line"> and (-webkit-max-device-pixel-ratio: <span class="number">1.332</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (device-width: <span class="number">601px</span>) </span><br><span class="line"> and (device-height: <span class="number">906px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.331</span>) </span><br><span class="line"> and (-webkit-max-device-pixel-ratio: <span class="number">1.332</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="Kindle_Fire">Kindle Fire</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Kindle Fire HD 7" ----------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">800px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1280px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">800px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1280px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">800px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1280px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ----------- Kindle Fire HD 8.9" ----------- */</span></span><br><span class="line"><span class="comment">/* Portrait and Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">1200px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1600px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="comment">/* Portrait */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">1200px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1600px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span><br><span class="line"> and (orientation: portrait) </span>{</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Landscape */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> only screen </span><br><span class="line"> and (min-device-width: <span class="number">1200px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1600px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1.5</span>) </span><br><span class="line"> and (orientation: landscape) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Laptops">Laptops</h2><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Non-Retina Screens ----------- */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (min-device-width: <span class="number">1200px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1600px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">1</span>) </span>{ </span><br><span class="line">}</span><br><span class="line"><span class="comment">/* ----------- Retina Screens ----------- */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> screen </span><br><span class="line"> and (min-device-width: <span class="number">1200px</span>) </span><br><span class="line"> and (max-device-width: <span class="number">1600px</span>) </span><br><span class="line"> and (-webkit-min-device-pixel-ratio: <span class="number">2</span>)</span><br><span class="line"> and (min-resolution: <span class="number">192dpi</span>) </span>{ </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Wearables">Wearables</h2><h3 id="Apple_Watch">Apple Watch</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Apple Watch ----------- */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span></span><br><span class="line"> (max-device-width: <span class="number">42mm</span>)</span><br><span class="line"> and (min-device-width: <span class="number">38mm</span>) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="Moto_360_Watch">Moto 360 Watch</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* ----------- Moto 360 Watch ----------- */</span></span><br><span class="line"><span class="at_rule">@<span class="keyword">media</span> </span><br><span class="line"> (max-device-width: <span class="number">218px</span>)</span><br><span class="line"> and (max-device-height: <span class="number">281px</span>) </span>{ </span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<h2 id="响应式布局">响应式布局</h2><p>响应式布局麻烦之处就是每个尺寸的都要进行css定义，这个真的不是一般的蛋疼，下面有搜集到的各种尺寸css Media Query内容，搜集来源：<a href="https://css-tricks.com/snippets]]>
</summary>
<category term="css3" scheme="http://jslite.io/tags/css3/"/>
</entry>
<entry>
<title><![CDATA[stylus入门使用方法]]></title>
<link href="http://jslite.io/2015/04/27/stylus%E8%8F%9C%E9%B8%9F%E5%85%A5%E9%97%A8%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/"/>
<id>http://jslite.io/2015/04/27/stylus菜鸟入门使用方法/</id>
<published>2015-04-26T17:17:02.000Z</published>
<updated>2015-04-27T16:56:53.000Z</updated>
<content type="html"><![CDATA[<h2 id="stylus介绍">stylus介绍</h2><p>是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，<code>LESS</code>， <code>SASS</code>都在这方面做了一些贡献。 </p>
<p><code>Stylus</code> 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 <code>Stylus</code> 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 <code>SASS</code>/<code>LESS</code> 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。 </p>
<p><code>Stylus</code>默认使用 <code>.styl</code> 的作为文件扩展名，支持多样性的CSS语法。</p>
<p><code>Stylus</code>功能上更为强壮，和js联系更加紧密。所以我选择 <code>Stylus</code>，<code>SASS</code> 玩儿过一段时间，主要是这玩意依赖ruby运行，所以我放弃使用了。</p>
<h2 id="文档参考">文档参考</h2><p><a href="http://learnboost.github.io/stylus/" target="_blank" rel="external">官方Stylus API</a><br><a href="http://www.zhangxinxu.com/jq/stylus/" target="_blank" rel="external">张鑫旭中文翻译</a><br><a href="http://learnboost.github.io/stylus/try.html" target="_blank" rel="external">Try Stylus!</a> </p>
<h2 id="Stylus安装">Stylus安装</h2><p>全局安装，安装之前你需要你安装 <code>nodejs</code> 这个怎么安装搜去哦。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install stylus -g</span><br></pre></td></tr></table></figure>
<p>这样就算是安装完Stylus了，也可以正常使用Stylus。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Usage: stylus [options] [command] [< in [> out]] [file|dir ...] Commands: help <prop> Opens help info for <prop> in your default browser. (OS X only) Options: -u, --use <path> Utilize the stylus plugin at <path> -i, --interactive Start interactive REPL -w, --watch Watch file(s) for changes and re-compile -o, --out <dir> Output to <dir> when passing files -C, --css <src> [dest] Convert CSS input to Stylus -I, --include <path> Add <path> to lookup paths -c, --compress Compress CSS output -d, --compare Display input along with output -f, --firebug Emits debug infos in the generated css that can be used by the FireStylus Firebug plugin -l, --line-numbers Emits comments in the generated CSS indicating the corresponding Stylus line -V, --version Display the version of Stylus -h, --help Display help information</span><br></pre></td></tr></table></figure>
<h2 id="生成CSS">生成CSS</h2><h3 id="命令行中">命令行中</h3><p>建立一个<code>stylusExample/</code>，再在里面建立 <code>src</code> 目录专门存放 <code>stylus</code> 文件，在里面建立 <code>example.styl</code> 文件。然后在 <code>stylusExample</code> 目录下面执行下面命令</p>
<p><code>$ stylus --compress src/</code> </p>
<p>输出<code>compiled src/example.css</code> ，这个时候表示你生成成功了，带上<code>--compress</code>参数表示你生成压缩的CSS文件。 </p>
<p><code>$ stylus --css css/example.css css/out.styl</code> CSS转换成styl<br><code>$ stylus help box-shadow</code> CSS属性的帮助<br><code>$ stylus --css test.css</code> 输出基本名一致的.styl文件 </p>
<h3 id="grunt生成">grunt生成</h3><p>grunt生成 就比较爽歪歪了，具体grunt怎么玩儿，俺写了个教程<a href="http://jslite.io/2015/04/09/Grunt%E6%95%99%E7%A8%8B-%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96/">Grunt教程-前端自动化</a> 可以学习以下。 </p>
<p>stylusExample 目录下创建两个文件，这两个文件是grunt必备文件。</p>
<blockquote>
<p>package.json：用于保存项目元数据。<br>Gruntfile.js：用于配置或定义任务、加载 Grunt 插件。 </p>
</blockquote>
<p>package.json 内容</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> "<span class="attribute">name</span>": <span class="value"><span class="string">"test"</span></span>,</span><br><span class="line"> "<span class="attribute">version</span>": <span class="value"><span class="string">"1.0.0"</span></span>,</span><br><span class="line"> "<span class="attribute">description</span>": <span class="value"><span class="string">"测试的例子"</span></span>,</span><br><span class="line"> "<span class="attribute">repository</span>": <span class="value">{</span><br><span class="line"> "<span class="attribute">type</span>": <span class="value"><span class="string">"git"</span></span>,</span><br><span class="line"> "<span class="attribute">url</span>": <span class="value"><span class="string">""</span></span><br><span class="line"> </span>}</span><br><span class="line"></span>}</span><br></pre></td></tr></table></figure>
<p>然后安装必备插件，这些插件让stylus文件变更了自动生成，生成到相对应的文件目录中。如果报错你需要在命令行前面加上sudo，给它最大的执行权限。 </p>
<p><code>npm install grunt --save-dev</code><br><code>npm install grunt-contrib-watch --save-dev</code> ：监视文件变动，做出相应动作。<a href="https://www.npmjs.com/package/grunt-contrib-watch" target="_blank" rel="external">npm>></a><br><code>npm install grunt-contrib-stylus --save-dev</code> ：stylus编写styl输出css <a href="https://www.npmjs.com/package/grunt-contrib-stylus" target="_blank" rel="external">npm>></a> </p>
<p>安装出现这样的警告 <code>npm WARN package.json test@1.0.0 No README data</code> 可以不理会，如果你看着不舒服，你需要在stylusExample目录下面建立一个 README.md 文件并输入内容。也可命令执行 <code>echo "#stylus 学习" >> README.md</code> </p>
<p>插件执行完毕之后 <code>package.json</code> 文件变成了这样样子滴。</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> "<span class="attribute">name</span>": <span class="value"><span class="string">"test"</span></span>,</span><br><span class="line"> "<span class="attribute">version</span>": <span class="value"><span class="string">"1.0.0"</span></span>,</span><br><span class="line"> "<span class="attribute">description</span>": <span class="value"><span class="string">"测试的例子"</span></span>,</span><br><span class="line"> "<span class="attribute">repository</span>": <span class="value">{</span><br><span class="line"> "<span class="attribute">type</span>": <span class="value"><span class="string">"git"</span></span>,</span><br><span class="line"> "<span class="attribute">url</span>": <span class="value"><span class="string">""</span></span><br><span class="line"> </span>}</span>,</span><br><span class="line"> "<span class="attribute">devDependencies</span>": <span class="value">{</span><br><span class="line"> "<span class="attribute">grunt</span>": <span class="value"><span class="string">"^0.4.5"</span></span>,</span><br><span class="line"> "<span class="attribute">grunt-contrib-stylus</span>": <span class="value"><span class="string">"^0.21.0"</span></span>,</span><br><span class="line"> "<span class="attribute">grunt-contrib-watch</span>": <span class="value"><span class="string">"^0.6.1"</span></span><br><span class="line"> </span>}</span><br><span class="line"></span>}</span><br></pre></td></tr></table></figure>
<p>这个时候你需要使用这些插件儿完成你的任务需要在<code>Gruntfile.js</code>里面写你的执行任务。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/// 包装函数</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">grunt</span>) </span>{</span><br><span class="line"> <span class="comment">// 任务配置,所有插件的配置信息</span></span><br><span class="line"> grunt.initConfig({</span><br><span class="line"> pkg: grunt.file.readJSON(<span class="string">'package.json'</span>),</span><br><span class="line"> stylus:{</span><br><span class="line"> build: {</span><br><span class="line"> options: {</span><br><span class="line"> linenos: <span class="literal">false</span>,</span><br><span class="line"> compress: <span class="literal">true</span></span><br><span class="line"> },</span><br><span class="line"> files: [{</span><br><span class="line"> <span class="string">'css/index.css'</span>: [<span class="string">'src/index.styl'</span>]</span><br><span class="line"> }]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// watch插件的配置信息</span></span><br><span class="line"> watch: {</span><br><span class="line"> another: {</span><br><span class="line"> files: [<span class="string">'css/*'</span>,<span class="string">'src/*.styl'</span>],</span><br><span class="line"> tasks: [<span class="string">'stylus'</span>],</span><br><span class="line"> options: {</span><br><span class="line"> livereload: <span class="number">1337</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 告诉grunt我们将使用插件</span></span><br><span class="line"> grunt.loadNpmTasks(<span class="string">'grunt-contrib-watch'</span>);</span><br><span class="line"> grunt.loadNpmTasks(<span class="string">'grunt-contrib-stylus'</span>);</span><br><span class="line"> <span class="comment">// 告诉grunt当我们在终端中输入grunt时需要做些什么</span></span><br><span class="line"> grunt.registerTask(<span class="string">'default'</span>, [<span class="string">'watch'</span>]);</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<p>注意读懂上面的哦，目录高对哦，这些没有必要提醒哦，这个时候你可以好好耍一下stylus </p>
<h2 id="Stylus应用">Stylus应用</h2><p>这个时候真正的开始玩耍了哦。</p>
<h3 id="Try_Stylus!">Try Stylus!</h3><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">body,html margin:0 padding:0</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span>,</span><br><span class="line"><span class="tag">html</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">0</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">0</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<p>stylus : 强大的功能丰富的语言</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">-pos(type, args) i = 0 position: unquote(type) {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0 {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0 absolute() -pos('absolute', arguments) fixed() -pos('fixed', arguments) #prompt absolute: top 150px left 5px width: 200px margin-left: -(@width / 2) #logo fixed: top left</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="id">#prompt</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">150px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">100px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="id">#logo</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> fixed</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">0</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">0</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="nibStylus插件">nibStylus插件</h3><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@import 'nib' body background: linear-gradient(20px top, white, black)</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">-webkit-linear-gradient</span>(<span class="number">20px</span> top, <span class="hexcolor">#fff</span>, <span class="hexcolor">#000</span>)</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">-moz-linear-gradient</span>(<span class="number">20px</span> top, <span class="hexcolor">#fff</span>, <span class="hexcolor">#000</span>)</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">-o-linear-gradient</span>(<span class="number">20px</span> top, <span class="hexcolor">#fff</span>, <span class="hexcolor">#000</span>)</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">-ms-linear-gradient</span>(<span class="number">20px</span> top, <span class="hexcolor">#fff</span>, <span class="hexcolor">#000</span>)</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">linear-gradient</span>(<span class="number">20px</span> top, <span class="hexcolor">#fff</span>, <span class="hexcolor">#000</span>)</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Nesting(嵌套)">Nesting(嵌套)</h3><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">header #logo border:1px solid red</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">header</span> <span class="id">#logo</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1px</span> solid <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Flexible_syntax(灵活的用法)">Flexible syntax(灵活的用法)</h3><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">body font 14px/1.5 Helvetica, arial, sans-serif button button.button input[type='button'] input[type='submit'] border-radius 5px header #logo,div font-size:14px</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font</span>:<span class="value"> <span class="number">14px</span>/<span class="number">1.5</span> Helvetica, arial, sans-serif</span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">body</span> <span class="tag">button</span>,</span><br><span class="line"><span class="tag">body</span> <span class="tag">button</span><span class="class">.button</span>,</span><br><span class="line"><span class="tag">body</span> <span class="tag">input</span><span class="attr_selector">[type='button']</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">header</span> <span class="id">#logo</span>,</span><br><span class="line"><span class="tag">header</span> <span class="tag">div</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">14px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Flexible_&(灵活&)">Flexible &(灵活&)</h3><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ul li a display: block color: blue padding: 5px html.ie & padding: 6px &:hover color: red</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">display</span>:<span class="value"> block</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">html</span><span class="class">.ie</span> <span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">6px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span><span class="pseudo">:hover</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Functions_方法">Functions 方法</h3><h4 id="返回值">返回值</h4><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border-radius(val) -webkit-border-radius: val -moz-border-radius: val border-radius: val button border-radius(5px);</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">button</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="Transparent_mixins">Transparent mixins</h4><p>不带参数</p>
<p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments button border-radius: 5px 10px;</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">button</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"> <span class="number">5px</span> <span class="number">10px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"> <span class="number">5px</span> <span class="number">10px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">5px</span> <span class="number">10px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="默认参数">默认参数</h4><p>不带参数</p>
<p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">add(a, b = a) a + b add(10, 5) // => 15 add(10) // => 20</span><br></pre></td></tr></table></figure>
<h4 id="函数体">函数体</h4><p>通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">add(a, b = a) a = unit(a, px) b = unit(b, px) a + b add(15%, 10deg) // => 25</span><br></pre></td></tr></table></figure>
<h4 id="多个返回值">多个返回值</h4><p>通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">sizes() 15px 10px sizes()[0] // => 15px</span><br></pre></td></tr></table></figure>
<h3 id="Variables(变量)">Variables(变量)</h3><h4 id="常用方法">常用方法</h4><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">font-size = 14px body font font-size Arial, sans-seri</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font</span>:<span class="value"> <span class="number">14px</span> Arial, sans-seri</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="变量放在属性中">变量放在属性中</h4><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#prompt position: absolute top: 150px left: 50% width: w = 200px margin-left: -(w / 2)</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="id">#prompt</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">150px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">50%</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">100px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="块属性访问引用">块属性访问引用</h4><p>stylus </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#prompt position: absolute width: 200px margin-left: -(@width / 2)</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="id">#prompt</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">100px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="属性有条件地定义属性">属性有条件地定义属性</h4><p>stylus:指定z-index值为1，但是，只有在z-index之前未指定的时候才这样： </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">position() position: arguments z-index: 1 unless @z-index #logo z-index: 20 position: absolute #logo2 position: absolute</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="id">#logo</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">z-index</span>:<span class="value"> <span class="number">20</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="id">#logo2</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">z-index</span>:<span class="value"> <span class="number">1</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h4 id="向上冒泡">向上冒泡</h4><p>stylus:属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）下面这个例子，@color被弄成了blue.</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">body color: red ul li color: blue a background-color: @color</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">body</span> <span class="tag">ul</span> <span class="tag">li</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">body</span> <span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Iteration(迭代)">Iteration(迭代)</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">table for row in 1 2 3 4 5 tr:nth-child({row}) height: 10px * row</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">table</span> <span class="tag">tr</span><span class="pseudo">:nth-child(1)</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">10px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">table</span> <span class="tag">tr</span><span class="pseudo">:nth-child(2)</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">20px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">table</span> <span class="tag">tr</span><span class="pseudo">:nth-child(3)</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">30px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">table</span> <span class="tag">tr</span><span class="pseudo">:nth-child(4)</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">40px</span></span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="tag">table</span> <span class="tag">tr</span><span class="pseudo">:nth-child(5)</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">50px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Interpolation(插值)">Interpolation(插值)</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vendors = webkit moz o ms official border-radius() for vendor in vendors if vendor == official border-radius: arguments else -{vendor}-border-radius: arguments #content border-radius: 5px</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="id">#content</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-o-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-ms-border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">5px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="Operators(运算符)">Operators(运算符)</h3><p>运算符优先级<br>下表运算符优先级，从最高到最低： </p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">. [] ! ~ + - is defined ** * / % + - ... .. <= >= < > in == is != is not isnt is a && and || or ?: = := ?= += -= *= /= %= not if unless</span><br></pre></td></tr></table></figure>
<h3 id="@import">@import</h3><p><code>@import "reset.css"</code></p>
<p>当使用<code>@import</code>没有<code>.css</code>扩展，会被认为是<code>Stylus</code>片段（如：<code>@import "mixins/border-radius"</code>）。 </p>
<p><code>@import</code>工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从<code>filename</code>选项的<code>dirname</code>衍生而来。 因此，如果你的文件名是<code>/tmp/testing/stylus/main.styl</code>，导入将显现为<code>/tmp/testing/stylus/</code>。 </p>
<p><code>@import</code>也支持索引形式。这意味着当你<code>@import blueprint</code>, 则会理解成<code>blueprint.styl</code>或<code>blueprint/index.styl</code>. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。</p>
<h3 id="@font-face">@font-face</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@font-face font-family Geo font-style normal src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo font-family Geo</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="at_rule">@<span class="keyword">font-face</span></span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font-family</span>:<span class="value"> Geo</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">font-style</span>:<span class="value"> normal</span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">src</span>:<span class="value"> <span class="function">url</span>(<span class="string">"fonts/geo_sans_light/GensansLight.ttf"</span>)</span></span>;</span><br><span class="line">}</span></span><br><span class="line"><span class="class">.ingeo</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font-family</span>:<span class="value"> Geo</span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>
<h3 id="@media">@media</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@media print #header #footer display none</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="at_rule">@<span class="keyword">media</span> print </span>{</span><br><span class="line"> <span class="id">#header</span>,</span><br><span class="line"> <span class="id">#footer</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">display</span>:<span class="value"> none</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="@keyframes">@keyframes</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@keyframes pulse 0% background-color red transform scale(1.0) rotate(0deg) 33% background-color blue -webkit-transform scale(1.1) rotate(-5deg)</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="at_rule">@<span class="keyword">-moz-keyframes</span> pulse </span>{</span><br><span class="line"> 0% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1</span>) <span class="function">rotate</span>(<span class="number">0deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> 33% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1.1</span>) <span class="function">rotate</span>(-<span class="number">5deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">-webkit-keyframes</span> pulse </span>{</span><br><span class="line"> 0% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1</span>) <span class="function">rotate</span>(<span class="number">0deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> 33% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1.1</span>) <span class="function">rotate</span>(-<span class="number">5deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">-o-keyframes</span> pulse </span>{</span><br><span class="line"> 0% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1</span>) <span class="function">rotate</span>(<span class="number">0deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> 33% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1.1</span>) <span class="function">rotate</span>(-<span class="number">5deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br><span class="line"><span class="at_rule">@<span class="keyword">keyframes</span> pulse </span>{</span><br><span class="line"> 0% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f00</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1</span>) <span class="function">rotate</span>(<span class="number">0deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line"> 33% <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#00f</span></span></span>;</span><br><span class="line"> <span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"> <span class="function">scale</span>(<span class="number">1.1</span>) <span class="function">rotate</span>(-<span class="number">5deg</span>)</span></span>;</span><br><span class="line"> }</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="CSS字面量(CSS_Literal)">CSS字面量(CSS Literal)</h3><p>stylus</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@css { body { font: 14px; } }</span><br></pre></td></tr></table></figure>
<p>编译成</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="tag">body</span> <span class="rules">{</span><br><span class="line"> <span class="rule"><span class="attribute">font</span>:<span class="value"> <span class="number">14px</span></span></span>;</span><br><span class="line">}</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<h2 id="stylus介绍">stylus介绍</h2><p>是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，<code>LESS</code>， <code>SASS</code>都在这方面做了一些贡献。 </p>
<p><cod]]>
</summary>
<category term="css" scheme="http://jslite.io/tags/css/"/>
<category term="stylus" scheme="http://jslite.io/tags/stylus/"/>
</entry>
<entry>
<title><![CDATA[js获取来源的URL代码]]></title>
<link href="http://jslite.io/2015/04/22/js%E8%8E%B7%E5%8F%96%E6%9D%A5%E6%BA%90%E7%9A%84URL%E4%BB%A3%E7%A0%81/"/>
<id>http://jslite.io/2015/04/22/js获取来源的URL代码/</id>
<published>2015-04-22T06:56:04.000Z</published>
<updated>2015-05-07T16:29:23.000Z</updated>
<content type="html"><![CDATA[<h2 id="referrer">referrer</h2><p>正常取来源网页的URL只要用</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">document</span>.referrer</span><br></pre></td></tr></table></figure>
<h2 id="opener">opener</h2><p>如果来源页是Javascript跳转过来的，上边的方法就拿不到了！所以用</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">opener.location.href</span><br></pre></td></tr></table></figure>
<h2 id="合并">合并</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> ref = <span class="string">''</span>; </span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">document</span>.referrer.length > <span class="number">0</span>) { </span><br><span class="line"> ref = <span class="built_in">document</span>.referrer; </span><br><span class="line">}<span class="keyword">try</span> { </span><br><span class="line"> <span class="keyword">if</span> (ref.length == <span class="number">0</span> && opener.location.href.length > <span class="number">0</span>) { </span><br><span class="line"> ref = opener.location.href; </span><br><span class="line"> } </span><br><span class="line">} <span class="keyword">catch</span> (e) {}</span><br></pre></td></tr></table></figure>
<h2 id="其它">其它</h2><h3 id="获取域名后面的">获取域名后面的</h3><p><code>window.location.pathname</code> </p>
<h3 id="获取URL">获取URL</h3><p><code>window.location.href</code> </p>
<h3 id="获取域名">获取域名</h3><p><code>/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:[0-9]{1,4})?/</code> 域名加端口号</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var urlReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/; var url=urlReg.exec("http://www.baidu.com/aaaa"); console.log(url[0]);</span><br></pre></td></tr></table></figure>
<h3 id="获取URL参数">获取URL参数</h3><p><code>location.search</code> //=> “?hello=1&wcj=2”<br><code>location.search.substr(1)</code> //=> “hello=1&wcj=2”<br><code>location.search.substr(1).split('&')</code> //=> [“hello=1”, “wcj=2”]</p>
<h3 id="获取URL返回JSON">获取URL返回JSON</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> url=location.search.substr(<span class="number">1</span>).split(<span class="string">'&'</span>),</span><br><span class="line"> i=url.length,</span><br><span class="line"> _url,</span><br><span class="line"> GET={};</span><br><span class="line"> </span><br><span class="line"><span class="keyword">while</span>(i--){</span><br><span class="line"> _url = url[i].split(<span class="string">'='</span>);</span><br><span class="line"> GET[_url.shift()]=<span class="built_in">decodeURIComponent</span>(_url);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(GET) <span class="comment">//=> Object {wcj: "2", hello: "1"}</span></span><br></pre></td></tr></table></figure>
<h3 id="获取URL参数-1">获取URL参数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*</span><br><span class="line"> * 获取特定字段的查询字符串</span><br><span class="line"> * @param {String} name: 查询字符串的字段名</span><br><span class="line"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getQuerySrting</span>(<span class="params">name</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> search = location.search.substring(<span class="number">1</span>).split(<span class="string">'&'</span>);</span><br><span class="line"> <span class="keyword">var</span> value = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>;i < search.length;i++) {</span><br><span class="line"> <span class="keyword">var</span> keyValue = search[i].split(<span class="string">'='</span>);</span><br><span class="line"> <span class="keyword">if</span> (keyValue[<span class="number">0</span>] == name) {</span><br><span class="line"> value = keyValue[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> value;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<![CDATA[<h2 id="referrer">referrer</h2><p>正常取来源网页的URL只要用</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span ]]>
</summary>
</entry>
<entry>
<title><![CDATA[前端博客相关网站搜集]]></title>
<link href="http://jslite.io/2015/04/17/%E5%89%8D%E7%AB%AF%E5%8D%9A%E5%AE%A2%E7%9B%B8%E5%85%B3%E7%BD%91%E7%AB%99%E6%90%9C%E9%9B%86/"/>
<id>http://jslite.io/2015/04/17/前端博客相关网站搜集/</id>
<published>2015-04-17T13:13:57.000Z</published>
<updated>2015-04-23T09:57:47.000Z</updated>
<content type="html"><![CDATA[<h1 id="中文前端开发博客网站列表">中文前端开发博客网站列表</h1><p>本博客网站列表会不断更新维护，如果有推荐的博客</p>
<h2 id="组织团伙">组织团伙</h2><p><a href="http://www.w3.org/" target="_blank" rel="external">W3C</a><br><a href="http://www.chinaw3c.org/member-meetings.html#tpac" target="_blank" rel="external">TPAC</a><br><a href="http://w3ctech.com/" target="_blank" rel="external">w3ctech</a><br><a href="http://www.webrebuild.org/" target="_blank" rel="external">WebReBuild</a><br><a href="http://www.mhtml5.com/" target="_blank" rel="external">HTML5研究小组</a><br><a href="http://adc.alibabatech.org/" target="_blank" rel="external">阿里技术嘉年华</a><br><a href="http://jsconf.cn/" target="_blank" rel="external">京/沪JS</a><br><a href="http://fequan.com/" target="_blank" rel="external">前端圈</a><br><a href="http://www.html5dw.com/" target="_blank" rel="external">HTML5梦工场</a><br><a href="http://accessibilityunion.org/" target="_blank" rel="external">无障碍联盟</a> </p>
<h2 id="综合">综合</h2><p><a href="http://www.qianduan.net/" target="_blank" rel="external">前端观察</a><br><a href="http://www.ruanyifeng.com/blog/" target="_blank" rel="external">阮一峰</a><br><a href="http://www.w3cplus.com/" target="_blank" rel="external">W3CPLUS</a><br><a href="http://www.w3cfuns.com/" target="_blank" rel="external">W3CFUNS</a><br><a href="http://www.daqianduan.com/" target="_blank" rel="external">大前端</a><br><a href="http://www.w3help.org/zh-cn/" target="_blank" rel="external">W3HELP</a><br><a href="http://www.w3school.com.cn/" target="_blank" rel="external">W3SCHOOL</a><br><a href="http://www.html5cn.org/" target="_blank" rel="external">HTML5中国</a><br><a href="http://www.html-js.com/" target="_blank" rel="external">前端乱炖</a><br><a href="http://f2e.im/" target="_blank" rel="external">F2E社区</a><br><a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="external">MDN</a> </p>
<h2 id="个人博客">个人博客</h2><table>
<thead>
<tr>
<th>博客地址</th>
<th>RSS地址</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://blog.cssforest.org/" target="_blank" rel="external">CSS森林</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.twinsenliang.net/" target="_blank" rel="external">twinsen</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://blog.ivane.me/" target="_blank" rel="external">艾文王</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://yuguo.us/weblog/" target="_blank" rel="external">余果</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.zhangxinxu.com/wordpress/" target="_blank" rel="external">张鑫旭</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://bigc.at/" target="_blank" rel="external">大猫</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://pufen.net/" target="_blank" rel="external">飘飘</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://s5s5.me/" target="_blank" rel="external">米随随</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.99css.com/" target="_blank" rel="external">99css</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.topcss.org/" target="_blank" rel="external">进步博客</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://wange.im/" target="_blank" rel="external">万戈</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://rpsh.net/" target="_blank" rel="external">任平生</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.ofcss.com/" target="_blank" rel="external">小李刀刀</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.yuanyun.me/" target="_blank" rel="external">元云</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://csshouse.net/" target="_blank" rel="external">珍妮</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://tommyfan.com/blog/" target="_blank" rel="external">偷米饭</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.smallni.com/" target="_blank" rel="external">丁小倪</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="https://github.com/lifesinger/lifesinger.github.com/issues?labels=blog" target="_blank" rel="external">玉伯</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://jayli.github.io/blog/" target="_blank" rel="external">拔赤</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.osmn00.com/" target="_blank" rel="external">堂主</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.planabc.net/" target="_blank" rel="external">怿飞</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.aoao.org.cn/blog/" target="_blank" rel="external">嗷嗷</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.iyunlu.com/view/" target="_blank" rel="external">一丝</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://jiongks.name/" target="_blank" rel="external">勾三股四</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://hax.iteye.com/" target="_blank" rel="external">贺师俊</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://hikejun.com/blog/" target="_blank" rel="external">张克军</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://gaowhen.com/" target="_blank" rel="external">糖拌西红柿</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.css88.com/" target="_blank" rel="external">愚人码头</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://linxz.de" target="_blank" rel="external">林小志</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://i.wanz.im/" target="_blank" rel="external">丸子</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://uicss.cn/" target="_blank" rel="external">崔凯</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://julying.com/" target="_blank" rel="external">王子墨</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://js8.in/" target="_blank" rel="external">三水清</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.weilaixu.cn/" target="_blank" rel="external">许未来</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://uicss.cn/" target="_blank" rel="external">崔凯</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://blog.bingo929.com/" target="_blank" rel="external">彬go</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.wufangbo.com/" target="_blank" rel="external">武方博</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://panweizeng.com/" target="_blank" rel="external">潘魏增</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://swordair.com/" target="_blank" rel="external">葵中剑</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.css3china.com/" target="_blank" rel="external">css3China</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://www.brucewar.com/" target="_blank" rel="external">brucewar</a></td>
<td>——</td>
</tr>
<tr>
<td><a href="http://muyao.me" target="_blank" rel="external">牧遥</a></td>
<td><a href="http://muyao.me/feed/atom/" target="_blank" rel="external">http://muyao.me/feed/atom/</a></td>
</tr>
</tbody>
</table>
<h2 id="CDN免费服务">CDN免费服务</h2><p><a href="http://lib.sinaapp.com/" target="_blank" rel="external">新浪CDN</a><br><a href="http://libs.useso.com/" target="_blank" rel="external">360CDN</a><br><a href="http://cdn.code.baidu.com/" target="_blank" rel="external">百度CDN</a><br><a href="http://www.staticfile.org/" target="_blank" rel="external">七牛云存储</a><br><a href="http://jscdn.upai.com/" target="_blank" rel="external">又拍云JS库加速服务</a><br><a href="https://cdnjs.com/" target="_blank" rel="external">cdnjs.com</a><br><a href="http://www.cdnjs.cn/" target="_blank" rel="external">cdnjs.cn</a> </p>
]]></content>
<summary type="html">
<![CDATA[<h1 id="中文前端开发博客网站列表">中文前端开发博客网站列表</h1><p>本博客网站列表会不断更新维护，如果有推荐的博客</p>
<h2 id="组织团伙">组织团伙</h2><p><a href="http://www.w3.org/" target="_blank"]]>
</summary>
<category term="网站导航" scheme="http://jslite.io/tags/%E7%BD%91%E7%AB%99%E5%AF%BC%E8%88%AA/"/>
</entry>
<entry>
<title><![CDATA[本地存储cookie的封装]]></title>
<link href="http://jslite.io/2015/04/17/%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8cookie%E7%9A%84%E5%B0%81%E8%A3%85/"/>
<id>http://jslite.io/2015/04/17/本地存储cookie的封装/</id>
<published>2015-04-16T16:54:41.000Z</published>
<updated>2015-05-03T13:27:35.000Z</updated>
<content type="html"><![CDATA[<p><a href="https://github.com/jaywcjlove/cookie.js/issues" target="_blank" rel="external"><img src="https://img.shields.io/github/issues/jaywcjlove/cookie.js.svg" alt=""></a> <a href="https://github.com/jaywcjlove/cookie.js/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/cookie.js.svg" alt=""></a> <a href="https://github.com/jaywcjlove/cookie.js/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/cookie.js.svg" alt=""></a> <a href="https://github.com/jaywcjlove/cookie.js/releases" target="_blank" rel="external"><img src="https://img.shields.io/github/release/jaywcjlove/cookie.js.svg" alt=""></a></p>
<p>本地存储cookie的封装，提供简单的AIP，没有对IE做兼容处理，因为俺主要用于chrome，Safari，Firefox、<strong>移动端</strong>等先进浏览器里面跑。如果您有需求，可以自行解决，共享出来。目前俺用不上，所以不想兼容IE。。。</p>
<p><strong><a href="https://github.com/jaywcjlove/cookie.js" target="_blank" rel="external">Github下载地址</a></strong></p>
<h2 id="下载">下载</h2><h3 id="bower">bower</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ bower install cookiejs</span><br></pre></td></tr></table></figure>
<h3 id="npm">npm</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install cookiejs</span><br></pre></td></tr></table></figure>
<h2 id="cookie_APIs">cookie APIs</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cookie(<span class="string">"test"</span>,<span class="string">"tank"</span>,<span class="number">1800</span>) <span class="comment">//设置 cookie 的值，生存时间半个小时</span></span><br><span class="line">cookie(<span class="string">"test"</span>) <span class="comment">//获取 cookie 的值，显示tank</span></span><br><span class="line">cookie(<span class="string">"test"</span>,<span class="literal">null</span>) <span class="comment">//删除cookie test</span></span><br><span class="line">cookie() <span class="comment">//清空cookie</span></span><br><span class="line"></span><br><span class="line">cookie.set(<span class="string">"test"</span>,<span class="string">"tank"</span>,<span class="number">1800</span>) <span class="comment">//====cookie("test","tank",1800)</span></span><br><span class="line">cookie.get(<span class="string">"test"</span>) <span class="comment">//====cookie("test")</span></span><br><span class="line">cookie.remove(<span class="string">"test"</span>) <span class="comment">//====cookie("test",null)</span></span><br><span class="line">cookie.clear() <span class="comment">//====cookie()</span></span><br><span class="line"></span><br><span class="line">cookie.all() <span class="comment">//获取所有 cookie</span></span><br></pre></td></tr></table></figure>
<h3 id="批量设置cookie的值">批量设置cookie的值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">cookie.set({</span><br><span class="line"> name1: <span class="string">'value1'</span>,</span><br><span class="line"> name2: <span class="string">'value2'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>