-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathatom.xml
860 lines (656 loc) · 187 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Wind</title>
<link href="/atom.xml" rel="self"/>
<link href="http://zhangzirui.com/"/>
<updated>2016-11-12T14:03:14.000Z</updated>
<id>http://zhangzirui.com/</id>
<author>
<name>Wind</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>error collection</title>
<link href="http://zhangzirui.com/2016/10/31/2016/10/error-collection/"/>
<id>http://zhangzirui.com/2016/10/31/2016/10/error-collection/</id>
<published>2016-10-30T16:00:00.000Z</published>
<updated>2016-11-12T14:03:14.000Z</updated>
<content type="html"><![CDATA[<p>这些天，编码时犯的一些错误合集。</p>
<p>1.promise.resolve()中只能能传入一个参数，如果有多个参数可以合并为数组或者对象；</p>
<p>2.多个方法调用时要注意变量的名，不要写错了，，，是的，像ticket和tikect之类~_~；</p>
<p>3.编程时要注重思路方法，而不是追求代码写的漂亮，使用了什么高级的函数、方法，正确合适的思路很重要，有时候很简单的代码能实现很复杂的功能，思路很重要；</p>
<p>4.要注重创新，写业务代码时要反思有没有更好的的方法实现，这段代码能不能再优化下？不要做没有灵魂的coder。</p>
<p>don’t be a 码农。</p>
]]></content>
<summary type="html">
<p>这些天，编码时犯的一些错误合集。</p>
<p>1.promise.resolve()中只能能传入一个参数，如果有多个参数可以合并为数组或者对象；</p>
<p>2.多个方法调用时要注意变量的名，不要写错了，，，是的，像ticket和tikect之类~_~；</p>
<p>
</summary>
<category term="错误集锦" scheme="http://zhangzirui.com/categories/%E9%94%99%E8%AF%AF%E9%9B%86%E9%94%A6/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
<category term="promise" scheme="http://zhangzirui.com/tags/promise/"/>
</entry>
<entry>
<title>HAPI--build reusable api</title>
<link href="http://zhangzirui.com/2016/10/27/2016/10/hapi-first/"/>
<id>http://zhangzirui.com/2016/10/27/2016/10/hapi-first/</id>
<published>2016-10-26T16:00:00.000Z</published>
<updated>2016-11-06T14:56:44.000Z</updated>
<content type="html"><![CDATA[<p>A rich framework for building applications and services</p>
<p>hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hapi</div></pre></td></tr></table></figure>
<p>以上是HAPI官网对这一框架的介绍。简单来说就是帮助开发者建造可复用的后端逻辑，为应用提供强大的api。</p>
<p>安装的方式很简单，同express相似，<strong>npm install hapi</strong> 。这一框架在github上有将近7000的star，同它的老大哥express的2万8千多还是相差甚远，但是框架的意义在于解决实际工作中的重复劳动，简化开发流程，优化开发速度。在构建api方面，hapi还是跟express有一拼的，生态方面也良好，<a href="https://github.com/hapijs" target="_blank" rel="external">https://github.com/hapijs</a> 组织里将近80个的插件。</p>
<p>文档方面也很友好，<a href="http://hapijs.com/tutorials" target="_blank" rel="external">http://hapijs.com/tutorials</a> 里叙述详细，对nodejs熟悉的后端能很快的上手，有express经验的同学或许会有些疑惑，因为hapi里很多功能的实现与express不同了，但是细读文档，你会发现还是有很多相似的地方。</p>
<p>举个简单的例子，express里我想给response加一个方法，我只要使用express的实例app的use方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>)</span>{</div><div class="line"> res.apiSuccess = <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>{</div><div class="line"> res.json({</div><div class="line"> status: <span class="string">"OK"</span>,</div><div class="line"> result: data</div><div class="line"> })</div><div class="line"> }</div><div class="line"> next()</div><div class="line">})</div></pre></td></tr></table></figure>
<p>这样一个反应api请求成功的res拓展方法就完成了。而hapi中，你需要在hapi项目里创建的server下（server = new Hapi.Server()），使用它的handler方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">const</span> Hapi = <span class="built_in">require</span>(<span class="string">'hapi'</span>);</div><div class="line"><span class="keyword">const</span> server = <span class="keyword">new</span> Hapi.Server();</div><div class="line">server.connection({ host: <span class="string">'localhost'</span>, port: <span class="number">8000</span> });</div><div class="line"></div><div class="line"><span class="keyword">const</span> handler = <span class="function"><span class="keyword">function</span> (<span class="params">route, options</span>) </span>{</div><div class="line"></div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">request, reply</span>) </span>{</div><div class="line"></div><div class="line"> <span class="keyword">return</span> reply(<span class="string">'new handler: '</span> + options.msg);</div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line">server.handler(<span class="string">'test'</span>, handler);</div><div class="line"></div><div class="line">server.route({</div><div class="line"> method: <span class="string">'GET'</span>,</div><div class="line"> path: <span class="string">'/'</span>,</div><div class="line"> handler: { test: { msg: <span class="string">'test'</span> } }</div><div class="line">});</div><div class="line"></div><div class="line">server.start(<span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>{</div><div class="line"></div><div class="line">});</div></pre></td></tr></table></figure>
<p>在这里我们使用了server.handler注册了一个test放法，在之后的server.route中我们直接使用了test并为其添加了一个键值。之后访问 yourpath/ 你就会看到浏览器上显示<strong>new handler test</strong>。</p>
<p>之后还会继续研究hapi这个框架，毕竟之后的项目要在这一框架上运行，我也要利用这一框架开发出健壮的后端api，努力！</p>
]]></content>
<summary type="html">
<p>A rich framework for building applications and services</p>
<p>hapi enables developers to focus on writing reusable application logic ins
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
<category term="hapi" scheme="http://zhangzirui.com/tags/hapi/"/>
</entry>
<entry>
<title>promise--save you from callback</title>
<link href="http://zhangzirui.com/2016/10/25/2016/10/promise-bluebird/"/>
<id>http://zhangzirui.com/2016/10/25/2016/10/promise-bluebird/</id>
<published>2016-10-24T16:00:00.000Z</published>
<updated>2016-11-06T13:39:26.000Z</updated>
<content type="html"><![CDATA[<p>最近开了新项目，后端使用HAPI，前端是react-native做app，我的任务就是构建后端系统提供api给前端调用。hapi的功能很强大，毕竟是专门提供api的框架，与express各有千秋。</p>
<p>之前的一个项目以为比较古老，用的都是callback函数，之前我添加新功能的时候，回调写的欲仙欲死。这次决定能用promise的地方统统使用promise。</p>
<p>首先我考虑了bluebird这个包，在github上人气也很高，封装了各种promise的功能。去官网看了一下简单的介绍，使用很简单。bluebird还提供了promisifyAll这个方法将非promise的方法转换成支持promise的方法。我在一个路由函数中使用了下，部分代码简单写一下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">const</span> <span class="built_in">Promise</span> = <span class="built_in">require</span>(<span class="string">'bluebird'</span>),</div><div class="line"> _label = <span class="built_in">Promise</span>.promisifyAll(<span class="built_in">require</span>(<span class="string">'../service/label.service'</span>))</div><div class="line"></div><div class="line"><span class="keyword">const</span> insertlabel = (req, reply) => {</div><div class="line"> <span class="keyword">const</span> msg = <span class="keyword">new</span> message(),</div><div class="line"> label = req.payload.label,</div><div class="line"> store_id = req.payload.store_id;</div><div class="line"> _label.insert(label, store_id)</div><div class="line"> .then(()=>{</div><div class="line"> reply(msg.success(<span class="string">'success'</span>));</div><div class="line"> })</div><div class="line"> .catch((err)=>{</div><div class="line"> <span class="built_in">console</span>.error(err);</div><div class="line"> })</div><div class="line">};</div></pre></td></tr></table></figure>
<p>insert是label.service.js中的方法，但是并不是promise方法，函数返回的其实是一个callback。promisifyAll将promise化了。</p>
<p>之后我有尝试了原生的promise，即直接将insert这个方法使用promise改写。改写前的insert方法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">insert (label, store_id, callback) {</div><div class="line"> <span class="keyword">const</span> model = <span class="keyword">new</span> label_mongo({</div><div class="line"> store_id: objectid(store_id),</div><div class="line"> label: label</div><div class="line"> });</div><div class="line"> model.save((err) => {</div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'ERROR: insert new data fail'</span>)</div><div class="line"> <span class="keyword">return</span> callback(<span class="literal">false</span>)</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">return</span> callback(<span class="literal">true</span>)</div><div class="line"> }</div><div class="line"> });</div><div class="line"> },</div></pre></td></tr></table></figure>
<p>改写后</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">insert (label, store_id) {</div><div class="line"> <span class="keyword">const</span> model = <span class="keyword">new</span> label_mongo({</div><div class="line"> store_id: objectid(store_id),</div><div class="line"> label: label</div><div class="line"> });</div><div class="line"></div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>((resolve, reject)=>{</div><div class="line"> model.save((err) => {</div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> reject(<span class="string">'ERROR: insert new data fail'</span>)</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> resolve();</div><div class="line"> }</div><div class="line"> });</div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure>
<p>这样同样可以在路由函数中使用promise方法调用then()等api。再也不用担心陷入回调地狱中。</p>
<p>实际使用中建议还是使用bluebird、q这样的promise包，毕竟人家已经帮你把一些坑都填好了，直接用就是，当然，如果你开发周期不紧，有时间开发这样的功能插件的化，开发一个属于自己的promise包还是很有好处的。^o^</p>
<p>谢谢观看。</p>
]]></content>
<summary type="html">
<p>最近开了新项目，后端使用HAPI，前端是react-native做app，我的任务就是构建后端系统提供api给前端调用。hapi的功能很强大，毕竟是专门提供api的框架，与express各有千秋。</p>
<p>之前的一个项目以为比较古老，用的都是callback函数，之前
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
<category term="promise" scheme="http://zhangzirui.com/tags/promise/"/>
<category term="es6" scheme="http://zhangzirui.com/tags/es6/"/>
</entry>
<entry>
<title>request--Simplified HTTP request client</title>
<link href="http://zhangzirui.com/2016/10/23/2016/10/request-package/"/>
<id>http://zhangzirui.com/2016/10/23/2016/10/request-package/</id>
<published>2016-10-22T16:00:00.000Z</published>
<updated>2016-11-06T13:39:30.000Z</updated>
<content type="html"><![CDATA[<p>这一星期，因为做的功能需要从前端得到微信的语音mediaid，然后后端下载语音并保存到我们自己的服务器中。步骤略微繁琐，但是微信开发本就是这样，再微信内调用资源一切都好说，一旦超出限制就多了。</p>
<p>一开始我使用node自带的HTTP模块get微信的资源，但是http不支持https请求，于是选择了request这个很火的npm上的模块。支持https，支持stream。使用起来也很灵活。</p>
<p>看一段简单的代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="keyword">var</span> router = <span class="built_in">require</span>(<span class="string">'express'</span>).Router();</div><div class="line"><span class="keyword">var</span> request = <span class="built_in">require</span>(<span class="string">'request'</span>);</div><div class="line"></div><div class="line">router.route(<span class="string">'/baidu'</span>)</div><div class="line"> .get(<span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>)</span>{</div><div class="line"> request(<span class="string">'https://www.baidu.com'</span>)</div><div class="line"> .pipe(res)</div><div class="line"> .on(<span class="string">'finish'</span>, ()=>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'request get is done'</span>)</div><div class="line"> })</div><div class="line"> })</div></pre></td></tr></table></figure>
<p>访问你项目的/baidu地址，你会发现一个百度首页出现了，，，</p>
<p>好吧，其实不用request也能实现，但是request支持了流的方式，是效率更高。</p>
]]></content>
<summary type="html">
<p>这一星期，因为做的功能需要从前端得到微信的语音mediaid，然后后端下载语音并保存到我们自己的服务器中。步骤略微繁琐，但是微信开发本就是这样，再微信内调用资源一切都好说，一旦超出限制就多了。</p>
<p>一开始我使用node自带的HTTP模块get微信的资源，但是htt
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="node" scheme="http://zhangzirui.com/tags/node/"/>
<category term="request" scheme="http://zhangzirui.com/tags/request/"/>
</entry>
<entry>
<title>mongo的备份、导入、导出</title>
<link href="http://zhangzirui.com/2016/10/20/2016/10/mongo-restore-dump/"/>
<id>http://zhangzirui.com/2016/10/20/2016/10/mongo-restore-dump/</id>
<published>2016-10-19T16:00:00.000Z</published>
<updated>2016-11-06T13:39:36.000Z</updated>
<content type="html"><![CDATA[<p>今天mlab突然抽风，本地的测试项目也没法运行了。没办法，只好用本地的mongo了。mlab上的数据库也可以只有的导入导出，之前导入了项目的数据，现在可以导出，然后导入进本地的数据库中。<br>（PS：本地的mongorestore、mongoimport等操作直接讲cmd指向在mongo/bin中然后输入命令即可，不需要在mongo命令行下运行。）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">Binary</div><div class="line"></div><div class="line">Import database</div><div class="line">mongorestore -h dbhost -d foowala -u <user> -p <password> <input db directory></div><div class="line">Export database</div><div class="line">mongodump -h dbhost -d foowala -u <user> -p <password> -o <output directory></div><div class="line">Import collection</div><div class="line">mongorestore -h dbhost -d foowala -u <user> -p <password> <input .bson file></div><div class="line">Export collection</div><div class="line">mongodump -h dbhost -d foowala -c <collection> -u <user> -p <password> -o <output directory></div></pre></td></tr></table></figure>
<p>mlab上导出数据或者单条collection的命令如上。</p>
<p>得到数据库后我们直接使用mongorestore -h 127.0.0.1 -d test dapath导入即可。</p>
]]></content>
<summary type="html">
<p>今天mlab突然抽风，本地的测试项目也没法运行了。没办法，只好用本地的mongo了。mlab上的数据库也可以只有的导入导出，之前导入了项目的数据，现在可以导出，然后导入进本地的数据库中。<br>（PS：本地的mongorestore、mongoimport等操作直接讲cmd
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="mongodb" scheme="http://zhangzirui.com/tags/mongodb/"/>
</entry>
<entry>
<title>国庆后的一周</title>
<link href="http://zhangzirui.com/2016/10/15/2016/10/something%20of%20this%20week10-15/"/>
<id>http://zhangzirui.com/2016/10/15/2016/10/something of this week10-15/</id>
<published>2016-10-14T16:00:00.000Z</published>
<updated>2016-11-06T13:39:18.000Z</updated>
<content type="html"><![CDATA[<p>这周是国庆后的一周，也是连上7天的苦逼的一周，也是我再新公司上班的第一周。</p>
<p>公司的氛围很好，每个人都做着自己的事情。</p>
<p>希望能做的更好，技术更加厉害！</p>
]]></content>
<summary type="html">
<p>这周是国庆后的一周，也是连上7天的苦逼的一周，也是我再新公司上班的第一周。</p>
<p>公司的氛围很好，每个人都做着自己的事情。</p>
<p>希望能做的更好，技术更加厉害！</p>
</summary>
<category term="生活" scheme="http://zhangzirui.com/categories/%E7%94%9F%E6%B4%BB/"/>
<category term="日记" scheme="http://zhangzirui.com/tags/%E6%97%A5%E8%AE%B0/"/>
</entry>
<entry>
<title>Mongo中的where方法</title>
<link href="http://zhangzirui.com/2016/10/10/2016/10/mongowhere/"/>
<id>http://zhangzirui.com/2016/10/10/2016/10/mongowhere/</id>
<published>2016-10-09T16:00:00.000Z</published>
<updated>2016-11-06T13:39:34.000Z</updated>
<content type="html"><![CDATA[<p>最近在给公司的后台管理系统添加分页和搜索表单的功能，kain要求局部ajax刷新，因为以前用的是meteor这个框架，对ajax只是在自己的项目中简单使用了点，还好jquery中提供了强大的ajax api。</p>
<p>使用$ajax()即可，请求的方式，传递的值都可以在里面操作。分页完成后，就是搜索，我实现了一个简单的汉字搜索功能，使用mongoose的where api。<br>部分代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">getCategoryLimit: <span class="function"><span class="keyword">function</span>(<span class="params">keyword, page, rows, callback</span>) </span>{</div><div class="line"> <span class="comment">// var query = category_mongo.find();</span></div><div class="line"> <span class="keyword">var</span> pattern = <span class="keyword">new</span> <span class="built_in">RegExp</span>(keyword,<span class="string">'i'</span>),</div><div class="line"> query = category_mongo.where({<span class="string">"name"</span>:pattern});</div><div class="line"></div><div class="line"> query.skip((page - <span class="number">1</span>) * rows);</div><div class="line"> query.limit(rows);</div><div class="line"> <span class="comment">//计算分页数据</span></div><div class="line"> query.exec(<span class="function"><span class="keyword">function</span>(<span class="params">err,rs</span>) </span>{</div><div class="line"> <span class="comment">//计算数据总数</span></div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> <span class="built_in">console</span>.log(err)</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> category_mongo.find({<span class="string">"name"</span>:pattern},<span class="function"><span class="keyword">function</span>(<span class="params">err, result</span>) </span>{</div><div class="line"> jsonArray = { rows: rs, total: result.length };</div><div class="line"> callback(rs, jsonArray)</div><div class="line"> });</div><div class="line"> }</div><div class="line"> });</div><div class="line">}</div></pre></td></tr></table></figure>
<p>可以看到mongo中支持使用正则表达式来查询，非常强大。之后要完成的功能是模仿百度的搜索提示和拼音查询。</p>
]]></content>
<summary type="html">
<p>最近在给公司的后台管理系统添加分页和搜索表单的功能，kain要求局部ajax刷新，因为以前用的是meteor这个框架，对ajax只是在自己的项目中简单使用了点，还好jquery中提供了强大的ajax api。</p>
<p>使用$ajax()即可，请求的方式，传递的值都可以
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="mongodb" scheme="http://zhangzirui.com/tags/mongodb/"/>
<category term="search" scheme="http://zhangzirui.com/tags/search/"/>
</entry>
<entry>
<title>mongo中实现事务</title>
<link href="http://zhangzirui.com/2016/09/27/2016/09/transactions%20in%20MongoDB/"/>
<id>http://zhangzirui.com/2016/09/27/2016/09/transactions in MongoDB/</id>
<published>2016-09-27T12:10:50.000Z</published>
<updated>2016-09-28T05:07:44.000Z</updated>
<content type="html"><![CDATA[<p>今天面试被问到如何在mongo中实现事务，磕磕绊绊说了半天，但是还是没说到点上，面试小哥让我回去好好看看mongo的事务介绍，，，（这是不是没希望的节奏(T_T)）</p>
<p>首先看看数据库中的事务概念：</p>
<p>事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit)。事务通常由高级数据库操纵语言或编程语言（如SQL，C++或Java）书写的用户程序的执行所引起，并用形如begin transaction和end transaction语句（或函数调用）来界定。事务由事务开始(begin transaction)和事务结束(end transaction)之间执行的全体操作组成。</p>
<p>例如：在关系数据库中，一个事务可以是一条SQL语句，一组SQL语句或整个程序。</p>
<p>事务是恢复和并发控制的基本单位。</p>
<p>事务应该具有4个属性：原子性、一致性、隔离性、持续性。这四个属性通常称为ACID特性。</p>
<p>原子性（atomicity）。一个事务是一个不可分割的工作单位，事务中包括的诸操作要么都做，要么都不做。</p>
<p>一致性（consistency）。事务必须是使数据库从一个一致性状态变到另一个一致性状态。一致性与原子性是密切相关的。</p>
<p>隔离性（isolation）。一个事务的执行不能被其他事务干扰。即一个事务内部的操作及使用的数据对并发的其他事务是隔离的，并发执行的各个事务之间不能互相干扰。</p>
<p>持久性（durability）。持续性也称永久性（permanence），指一个事务一旦提交，它对数据库中数据的改变就应该是永久性的。接下来的其他操作或故障不应该对其有任何影响。</p>
<p>以上使百度来的事务的解释。</p>
<p>但是mongo中如何实现事务？看看github上的一个例子<a href="https://github.com/rystsov/mongodb-transaction-example" target="_blank" rel="external">https://github.com/rystsov/mongodb-transaction-example</a></p>
<p>使用了版本锁来实现事务。</p>
<p>推酷上也有篇文章介绍了如何实现<a href="http://www.tuicool.com/articles/f6ZBjm" target="_blank" rel="external">http://www.tuicool.com/articles/f6ZBjm</a></p>
<p>在要操作的两个文档外再创建一个事务表，用来控制两个表之间数据的传递。</p>
]]></content>
<summary type="html">
<p>今天面试被问到如何在mongo中实现事务，磕磕绊绊说了半天，但是还是没说到点上，面试小哥让我回去好好看看mongo的事务介绍，，，（这是不是没希望的节奏(T_T)）</p>
<p>首先看看数据库中的事务概念：</p>
<p>事务(Transaction)是访问并可能更新数据
</summary>
<category term="数据库" scheme="http://zhangzirui.com/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/"/>
<category term="mongodb" scheme="http://zhangzirui.com/tags/mongodb/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
</entry>
<entry>
<title>es6代码的es5实现（转载）</title>
<link href="http://zhangzirui.com/2016/09/26/2016/09/make%20es6%20in%20es5/"/>
<id>http://zhangzirui.com/2016/09/26/2016/09/make es6 in es5/</id>
<published>2016-09-26T12:10:50.000Z</published>
<updated>2016-09-27T10:26:20.000Z</updated>
<content type="html"><![CDATA[<p><strong>原文链接：<a href="https://github.com/addyosmani/es6-equivalents-in-es5" target="_blank" rel="external">https://github.com/addyosmani/es6-equivalents-in-es5</a></strong></p>
<p><strong>箭头函数，块作用域函数，模板字面常数等等的 ES6 代码如果用 ES5 来写会是什么样的呢，chrome 团队的前端工程师 Addy Osmani 总结了一些 ES6 语法的 ES5 实现。 —— 由 江江也叫Glowin 分享</strong></p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map(n => n * <span class="number">2</span>);</div><div class="line"><span class="comment">// -> [ 2, 4, 6 ]</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map(<span class="function"><span class="keyword">function</span>(<span class="params">n</span>) </span>{ <span class="keyword">return</span> n * <span class="number">2</span>; }, <span class="keyword">this</span>);</div><div class="line"><span class="comment">// -> [ 2, 4, 6 ]</span></div></pre></td></tr></table></figure>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> evens = [<span class="number">2</span>, <span class="number">4</span>, <span class="number">6</span>, <span class="number">8</span>, <span class="number">10</span>];</div><div class="line"></div><div class="line"><span class="comment">// Expression bodies</span></div><div class="line"><span class="keyword">var</span> odds = evens.map(v => v + <span class="number">1</span>);</div><div class="line"><span class="keyword">var</span> nums = evens.map((v, i) => v + i);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(odds);</div><div class="line"><span class="comment">// -> [3, 5, 7, 9, 11]</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(nums);</div><div class="line"><span class="comment">// -> [2, 5, 8, 11, 14]</span></div><div class="line"></div><div class="line"><span class="comment">// Statement bodies</span></div><div class="line"><span class="keyword">var</span> fives = [];</div><div class="line">nums = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">15</span>, <span class="number">25</span>, <span class="number">32</span>];</div><div class="line">nums.forEach(v => {</div><div class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>)</div><div class="line"> fives.push(v);</div><div class="line">});</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(fives);</div><div class="line"><span class="comment">// -> [5, 15, 25]</span></div><div class="line"></div><div class="line"><span class="comment">// Lexical this</span></div><div class="line"><span class="keyword">var</span> bob = {</div><div class="line"> _name: <span class="string">'Bob'</span>,</div><div class="line"> _friends: [],</div><div class="line"> printFriends() {</div><div class="line"> <span class="keyword">this</span>._friends.forEach(f =></div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>._name + <span class="string">' knows '</span> + f));</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> evens = [<span class="number">2</span>, <span class="number">4</span>, <span class="number">6</span>, <span class="number">8</span>, <span class="number">10</span>];</div><div class="line"></div><div class="line"><span class="comment">// Expression bodies</span></div><div class="line"><span class="keyword">var</span> odds = evens.map(<span class="function"><span class="keyword">function</span> (<span class="params">v</span>) </span>{</div><div class="line"> <span class="keyword">return</span> v + <span class="number">1</span>;</div><div class="line">}, <span class="keyword">this</span>);</div><div class="line"><span class="keyword">var</span> nums = evens.map(<span class="function"><span class="keyword">function</span> (<span class="params">v, i</span>) </span>{</div><div class="line"> <span class="keyword">return</span> v + i;</div><div class="line">}, <span class="keyword">this</span>);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(odds);</div><div class="line"><span class="comment">// -> [3, 5, 7, 9, 11]</span></div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(nums);</div><div class="line"><span class="comment">// -> [2, 5, 8, 11, 14]</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> fives = [];</div><div class="line">nums = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">5</span>, <span class="number">15</span>, <span class="number">25</span>, <span class="number">32</span>];</div><div class="line"></div><div class="line"><span class="comment">// Statement bodies</span></div><div class="line">nums.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">v</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>) {</div><div class="line"> fives.push(v);</div><div class="line"> }</div><div class="line">}, <span class="keyword">this</span>);</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(fives);</div><div class="line"><span class="comment">// -> [5, 15, 25]</span></div><div class="line"></div><div class="line"><span class="comment">// Lexical this</span></div><div class="line"><span class="keyword">var</span> bob = {</div><div class="line"> _name: <span class="string">'Bob'</span>,</div><div class="line"> _friends: [],</div><div class="line"> printFriends: <span class="function"><span class="keyword">function</span> <span class="title">printFriends</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">this</span>._friends.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">f</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="keyword">this</span>._name + <span class="string">' knows '</span> + f);</div><div class="line"> }, <span class="keyword">this</span>);</div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure>
<p>Block Scoping Functions</p>
<p>Block scoped bindings provide scopes other than the function and top level scope. This ensures your variables don’t leak out of the scope they’re defined:</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// let declares a block scope local variable,</span></div><div class="line"><span class="comment">// optionally initializing it to a value in ES6</span></div><div class="line"><span class="meta"></span></div><div class="line">'use strict';</div><div class="line"></div><div class="line"><span class="keyword">var</span> a = <span class="number">5</span>;</div><div class="line"><span class="keyword">var</span> b = <span class="number">10</span>;</div><div class="line"></div><div class="line"><span class="keyword">if</span> (a === <span class="number">5</span>) {</div><div class="line"> <span class="keyword">let</span> a = <span class="number">4</span>; <span class="comment">// The scope is inside the if-block</span></div><div class="line"> <span class="keyword">var</span> b = <span class="number">1</span>; <span class="comment">// The scope is inside the function</span></div><div class="line"></div><div class="line"> <span class="built_in">console</span>.log(a); <span class="comment">// 4</span></div><div class="line"> <span class="built_in">console</span>.log(b); <span class="comment">// 1</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 5</span></div><div class="line"><span class="built_in">console</span>.log(b); <span class="comment">// 1</span></div></pre></td></tr></table></figure>
<p>//let再es5中使用闭包实现</p>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> a = <span class="number">5</span>;</div><div class="line"><span class="keyword">var</span> b = <span class="number">10</span>;</div><div class="line"></div><div class="line"><span class="keyword">if</span> (a === <span class="number">5</span>) {</div><div class="line"> <span class="comment">// technically is more like the following</span></div><div class="line"> (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> a = <span class="number">4</span>;</div><div class="line"> b = <span class="number">1</span>;</div><div class="line"></div><div class="line"> <span class="built_in">console</span>.log(a); <span class="comment">// 4</span></div><div class="line"> <span class="built_in">console</span>.log(b); <span class="comment">// 1</span></div><div class="line"> })();</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 5</span></div><div class="line"><span class="built_in">console</span>.log(b); <span class="comment">// 1</span></div></pre></td></tr></table></figure>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// const creates a read-only named constant in ES6.</span></div><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="comment">// define favorite as a constant and give it the value 7</span></div><div class="line"><span class="keyword">const</span> favorite = <span class="number">7</span>;</div><div class="line"><span class="comment">// Attempt to overwrite the constant</span></div><div class="line"><span class="keyword">try</span> {</div><div class="line"> favorite = <span class="number">15</span>;</div><div class="line">} <span class="keyword">catch</span> (err) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'my favorite number is still: '</span> + favorite);</div><div class="line"> <span class="comment">// will still print 7</span></div><div class="line">}</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="comment">// define favorite as a non-writable `constant` and give it the value 7</span></div><div class="line"><span class="built_in">Object</span>.defineProperties(<span class="built_in">window</span>, {</div><div class="line"> favorite: {</div><div class="line"> value: <span class="number">7</span>,</div><div class="line"> enumerable: <span class="literal">true</span></div><div class="line"> }</div><div class="line">});</div><div class="line"><span class="comment">// ^ descriptors are by default false and const are enumerable</span></div><div class="line"><span class="keyword">var</span> favorite = <span class="number">7</span>;</div><div class="line"><span class="comment">// Attempt to overwrite the constant</span></div><div class="line">favorite = <span class="number">15</span>;</div><div class="line"><span class="comment">// will still print 7</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'my favorite number is still: '</span> + favorite);</div></pre></td></tr></table></figure>
<p>Template Literals</p>
<p>ES6 Template Literals are strings that can include embedded expressions. This is sometimes referred to as string interpolation.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Basic usage with an expression placeholder</span></div><div class="line"><span class="keyword">var</span> person = <span class="string">'Addy Osmani'</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">`Yo! My name is <span class="subst">${person}</span>!`</span>);</div><div class="line"></div><div class="line"><span class="comment">// Expressions work just as well with object literals</span></div><div class="line"><span class="keyword">var</span> user = {name: <span class="string">'Caitlin Potter'</span>};</div><div class="line"><span class="built_in">console</span>.log(<span class="string">`Thanks for getting this into V8, <span class="subst">${user.name}</span>.`</span>);</div><div class="line"></div><div class="line"><span class="comment">// Expression interpolation. One use is readable inline math.</span></div><div class="line"><span class="keyword">var</span> a = <span class="number">50</span>;</div><div class="line"><span class="keyword">var</span> b = <span class="number">100</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">`The number of JS frameworks is <span class="subst">${a + b}</span> and not <span class="subst">${2 * a + b}</span>.`</span>);</div><div class="line"></div><div class="line"><span class="comment">// Multi-line strings without needing \n\</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`string text line 1</span></div><div class="line">string text line 2`);</div><div class="line"></div><div class="line"><span class="comment">// Functions inside expressions</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{ <span class="keyword">return</span> <span class="string">'result'</span>; }</div><div class="line"><span class="built_in">console</span>.log(<span class="string">`foo <span class="subst">${fn()}</span> bar`</span>);</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="comment">// Basic usage with an expression placeholder</span></div><div class="line"><span class="keyword">var</span> person = <span class="string">'Addy Osmani'</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Yo! My name is '</span> + person + <span class="string">'!'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Expressions work just as well with object literals</span></div><div class="line"><span class="keyword">var</span> user = { name: <span class="string">'Caitlin Potter'</span> };</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Thanks for getting this into V8, '</span> + user.name + <span class="string">'.'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Expression interpolation. One use is readable inline math.</span></div><div class="line"><span class="keyword">var</span> a = <span class="number">50</span>;</div><div class="line"><span class="keyword">var</span> b = <span class="number">100</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'The number of JS frameworks is '</span> + (a + b) + <span class="string">' and not '</span> + (<span class="number">2</span> * a + b) + <span class="string">'.'</span>);</div><div class="line"></div><div class="line"><span class="comment">// Multi-line strings:</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'string text line 1\nstring text line 2'</span>);</div><div class="line"><span class="comment">// Or, alternatively:</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">'string text line 1\n\</span></div><div class="line">string text line 2');</div><div class="line"></div><div class="line"><span class="comment">// Functions inside expressions</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'result'</span>;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'foo '</span> + fn() + <span class="string">' bar'</span>);</div></pre></td></tr></table></figure>
<p>Computed Property Names</p>
<p>Computed property names allow you to specify properties in object literals based on expressions:</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> prefix = <span class="string">'foo'</span>;</div><div class="line"><span class="keyword">var</span> myObject = {</div><div class="line"> [prefix + <span class="string">'bar'</span>]: <span class="string">'hello'</span>,</div><div class="line"> [prefix + <span class="string">'baz'</span>]: <span class="string">'world'</span></div><div class="line">};</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(myObject[<span class="string">'foobar'</span>]);</div><div class="line"><span class="comment">// -> hello</span></div><div class="line"><span class="built_in">console</span>.log(myObject[<span class="string">'foobaz'</span>]);</div><div class="line"><span class="comment">// -> world</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> prefix = <span class="string">'foo'</span>;</div><div class="line"><span class="keyword">var</span> myObject = {};</div><div class="line"></div><div class="line">myObject[prefix + <span class="string">'bar'</span>] = <span class="string">'hello'</span>;</div><div class="line">myObject[prefix + <span class="string">'baz'</span>] = <span class="string">'world'</span>;</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(myObject[<span class="string">'foobar'</span>]);</div><div class="line"><span class="comment">// -> hello</span></div><div class="line"><span class="built_in">console</span>.log(myObject[<span class="string">'foobaz'</span>]);</div><div class="line"><span class="comment">// -> world</span></div></pre></td></tr></table></figure>
<p>Destructuring Assignment</p>
<p>The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> {foo, bar} = {foo: <span class="string">'lorem'</span>, bar: <span class="string">'ipsum'</span>};</div><div class="line"><span class="comment">// foo => lorem and bar => ipsum</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> _ref = { foo: <span class="string">'lorem'</span>, bar: <span class="string">'ipsum'</span> };</div><div class="line"></div><div class="line"><span class="comment">// foo => lorem and bar => ipsum</span></div><div class="line"><span class="keyword">var</span> foo = _ref.foo;</div><div class="line"><span class="keyword">var</span> bar = _ref.bar;</div></pre></td></tr></table></figure>
<p>ES3:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">with</span>({foo: <span class="string">'lorem'</span>, bar: <span class="string">'ipsum'</span>}) {</div><div class="line"> <span class="comment">// foo => lorem and bar => ipsum</span></div><div class="line">}</div><div class="line">···</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">ES6:</div><div class="line"></div><div class="line"><span class="string">``</span><span class="string">`javascript</span></div><div class="line">var [a, , b] = [1,2,3];</div></pre></td></tr></table></figure>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> _slicedToArray = <span class="function"><span class="keyword">function</span> (<span class="params">arr, i</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (<span class="built_in">Array</span>.isArray(arr)) {</div><div class="line"> <span class="keyword">return</span> arr;</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">var</span> _arr = [];</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> _iterator = arr[<span class="built_in">Symbol</span>.iterator](), _step; !(_step = _iterator.next()).done;) {</div><div class="line"> _arr.push(_step.value);</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (i && _arr.length === i) {</div><div class="line"> <span class="keyword">break</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> _arr;</div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">var</span> _ref = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"></div><div class="line"><span class="keyword">var</span> _ref2 = _slicedToArray(_ref, <span class="number">3</span>);</div><div class="line"></div><div class="line"><span class="keyword">var</span> a = _ref2[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> b = _ref2[<span class="number">2</span>];</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">String</span>.prototype.asNamedList = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.split(<span class="regexp">/\s*,\s*/</span>).map(<span class="function"><span class="keyword">function</span> (<span class="params">name, i</span>) </span>{</div><div class="line"> <span class="keyword">return</span> name ? (<span class="string">'var '</span> + name + <span class="string">'=slice('</span> + i + <span class="string">', '</span> + (i + <span class="number">1</span>) + <span class="string">')[0]'</span>) : <span class="string">''</span>;</div><div class="line"> }).join(<span class="string">';'</span>);</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">with</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]) {</div><div class="line"> <span class="built_in">eval</span>(<span class="string">'a, , b'</span>.asNamedList());</div><div class="line">}</div></pre></td></tr></table></figure>
<p>Default Parameters</p>
<p>Default parameters allow your functions to have optional arguments without needing to check arguments.length or check for undefined.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">greet</span>(<span class="params">msg='hello', name='world'</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(msg,name);</div><div class="line">}</div><div class="line"></div><div class="line">greet();</div><div class="line"><span class="comment">// -> hello world</span></div><div class="line">greet(<span class="string">'hey'</span>);</div><div class="line"><span class="comment">// -> hey world</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">greet</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// unfair ... if you access arguments[0] like this you can simply</span></div><div class="line"> <span class="comment">// access the msg variable name instead</span></div><div class="line"> <span class="keyword">var</span> msg = <span class="built_in">arguments</span>[<span class="number">0</span>] === <span class="literal">undefined</span> ? <span class="string">'hello'</span> : <span class="built_in">arguments</span>[<span class="number">0</span>];</div><div class="line"> <span class="keyword">var</span> name = <span class="built_in">arguments</span>[<span class="number">1</span>] === <span class="literal">undefined</span> ? <span class="string">'world'</span> : <span class="built_in">arguments</span>[<span class="number">1</span>];</div><div class="line"> <span class="built_in">console</span>.log(msg, name);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">greet</span>(<span class="params">msg, name</span>) </span>{</div><div class="line"> (msg === <span class="literal">undefined</span>) && (msg = <span class="string">'hello'</span>);</div><div class="line"> (name === <span class="literal">undefined</span>) && (name = <span class="string">'world'</span>);</div><div class="line"> <span class="built_in">console</span>.log(msg,name);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// using basic utility that check against undefined</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">greet</span>(<span class="params">msg, name</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(</div><div class="line"> defaults(msg, <span class="string">'hello'</span>),</div><div class="line"> defaults(name, <span class="string">'world'</span>)</div><div class="line"> );</div><div class="line">}</div><div class="line"></div><div class="line">greet();</div><div class="line"><span class="comment">// -> hello world</span></div><div class="line">greet(<span class="string">'hey'</span>);</div><div class="line"><span class="comment">// -> hey world</span></div></pre></td></tr></table></figure>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, y=12</span>) </span>{</div><div class="line"> <span class="comment">// y is 12 if not passed (or passed as undefined)</span></div><div class="line"> <span class="keyword">return</span> x + y;</div><div class="line">}</div><div class="line"></div><div class="line">f(<span class="number">3</span>) === <span class="number">15</span>;</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (y === <span class="literal">undefined</span>) {</div><div class="line"> y = <span class="number">12</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> x + y;</div><div class="line">}</div><div class="line"></div><div class="line">f(<span class="number">3</span>) === <span class="number">15</span>;</div></pre></td></tr></table></figure>
<p>Iterators And For-Of</p>
<p>Iterators are objects that can traverse a container. It’s a useful way to make a class work inside a for of loop.<br>The interface is similar to the iterators-interface. Iterating with a for..of loop looks like:</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Behind the scenes, this will get an iterator from the array and loop through it, getting values from it.</span></div><div class="line"><span class="keyword">for</span> (<span class="keyword">let</span> element <span class="keyword">of</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]) {</div><div class="line"> <span class="built_in">console</span>.log(element);</div><div class="line">}</div><div class="line"><span class="comment">// => 1 2 3</span></div></pre></td></tr></table></figure>
<p>ES6(without using for-of, if Symbol is supported):</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> _iterator = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>][<span class="built_in">Symbol</span>.iterator](), _step; !(_step = _iterator.next()).done;) {</div><div class="line"> <span class="keyword">var</span> element = _step.value;</div><div class="line"> <span class="built_in">console</span>.log(element);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// => 1 2 3</span></div></pre></td></tr></table></figure>
<p>ES5 (approximates):</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Using forEach()</span></div><div class="line"><span class="comment">// Doesn't require declaring indexing and element variables in your containing</span></div><div class="line"><span class="comment">// scope. They get supplied as arguments to the iterator and are scoped to just</span></div><div class="line"><span class="comment">// that iteration.</span></div><div class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</div><div class="line">a.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">element</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(element);</div><div class="line">});</div><div class="line"></div><div class="line"><span class="comment">// => 1 2 3</span></div><div class="line"></div><div class="line"><span class="comment">// Using a for loop</span></div><div class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < a.length; ++i) {</div><div class="line"> <span class="built_in">console</span>.log(a[i]);</div><div class="line">}</div><div class="line"><span class="comment">// => 1 2 3</span></div></pre></td></tr></table></figure>
<p>Note the use of Symbol. The ES5 equivalent would require a Symbol polyfill in order to correctly function.</p>
<p>Classes</p>
<p>This implements class syntax and semantics as described in the ES6 draft spec. Classes are a great way to reuse code.<br>Several JS libraries provide classes and inheritance, but they aren’t mutually compatible.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Hello</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>(name) {</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line"> }</div><div class="line"></div><div class="line"> hello() {</div><div class="line"> <span class="keyword">return</span> <span class="string">'Hello '</span> + <span class="keyword">this</span>.name + <span class="string">'!'</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">static</span> sayHelloAll() {</div><div class="line"> <span class="keyword">return</span> <span class="string">'Hello everyone!'</span>;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">HelloWorld</span> <span class="keyword">extends</span> <span class="title">Hello</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>() {</div><div class="line"> <span class="keyword">super</span>(<span class="string">'World'</span>);</div><div class="line"> }</div><div class="line"></div><div class="line"> echo() {</div><div class="line"> alert(<span class="keyword">super</span>.hello());</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">var</span> hw = <span class="keyword">new</span> HelloWorld();</div><div class="line">hw.echo();</div><div class="line"></div><div class="line">alert(Hello.sayHelloAll());</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Hello</span>(<span class="params">name</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line">}</div><div class="line"></div><div class="line">Hello.prototype.hello = <span class="function"><span class="keyword">function</span> <span class="title">hello</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'Hello '</span> + <span class="keyword">this</span>.name + <span class="string">'!'</span>;</div><div class="line">};</div><div class="line"></div><div class="line">Hello.sayHelloAll = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'Hello everyone!'</span>;</div><div class="line">};</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">HelloWorld</span>(<span class="params"></span>) </span>{</div><div class="line"> Hello.call(<span class="keyword">this</span>, <span class="string">'World'</span>);</div><div class="line">}</div><div class="line"></div><div class="line">HelloWorld.prototype = <span class="built_in">Object</span>.create(Hello.prototype);</div><div class="line"></div><div class="line">HelloWorld.prototype.echo = <span class="function"><span class="keyword">function</span> <span class="title">echo</span>(<span class="params"></span>) </span>{</div><div class="line"> alert(Hello.prototype.hello.call(<span class="keyword">this</span>));</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">var</span> hw = <span class="keyword">new</span> HelloWorld();</div><div class="line">hw.echo();</div><div class="line"></div><div class="line">alert(Hello.sayHelloAll());</div></pre></td></tr></table></figure>
<p>A more faithful (albeit, slightly verbose) interpretation can be found in this Babel output.</p>
<p>Modules</p>
<p>Modules are mostly implemented, with some parts of the Loader API still to be corrected. Modules try to solve many issues in dependencies and deployment, allowing users to create modules with explicit exports, import specific exported names from those modules, and keep these names separate.</p>
<p>Assumes an environment using CommonJS</p>
<p>app.js - ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> math <span class="keyword">from</span> <span class="string">'lib/math'</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'2π = '</span> + math.sum(math.pi, math.pi));</div></pre></td></tr></table></figure>
<p>app.js - ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> math = <span class="built_in">require</span>(<span class="string">'lib/math'</span>);</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'2π = '</span> + math.sum(math.pi, math.pi));</div></pre></td></tr></table></figure>
<p>lib/math.js - ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">return</span> x + y;</div><div class="line">}</div><div class="line"><span class="keyword">export</span> <span class="keyword">var</span> pi = <span class="number">3.141593</span>;</div></pre></td></tr></table></figure>
<p>lib/math/js - ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">exports.sum = sum;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">x, y</span>) </span>{</div><div class="line"> <span class="keyword">return</span> x + y;</div><div class="line">}</div><div class="line"><span class="keyword">var</span> pi = exports.pi = <span class="number">3.141593</span>;</div></pre></td></tr></table></figure>
<p>lib/mathplusplus.js - ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> * <span class="keyword">from</span> <span class="string">'lib/math'</span>;</div><div class="line"><span class="keyword">export</span> <span class="keyword">var</span> e = <span class="number">2.71828182846</span>;</div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.exp(x);</div><div class="line">}</div></pre></td></tr></table></figure>
<p>lib/mathplusplus.js - ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> <span class="built_in">Math</span> = <span class="built_in">require</span>(<span class="string">'lib/math'</span>);</div><div class="line"></div><div class="line"><span class="keyword">var</span> _extends = <span class="function"><span class="keyword">function</span> (<span class="params">target</span>) </span>{</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < <span class="built_in">arguments</span>.length; i++) {</div><div class="line"> <span class="keyword">var</span> source = <span class="built_in">arguments</span>[i];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> source) {</div><div class="line"> target[key] = source[key];</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> target;</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">var</span> e = exports.e = <span class="number">2.71828182846</span>;</div><div class="line">exports[<span class="string">'default'</span>] = <span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.exp(x);</div><div class="line">};</div><div class="line"></div><div class="line"><span class="built_in">module</span>.exports = _extends(exports[<span class="string">'default'</span>], exports);</div></pre></td></tr></table></figure>
<p>Numeric Literals</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> binary = [</div><div class="line"> <span class="number">0b0</span>,</div><div class="line"> <span class="number">0b1</span>,</div><div class="line"> <span class="number">0b11</span></div><div class="line">];</div><div class="line"><span class="built_in">console</span>.assert(binary === [<span class="number">0</span>, <span class="number">1</span>, <span class="number">3</span>]);</div><div class="line"></div><div class="line"><span class="keyword">var</span> octal = [</div><div class="line"> <span class="number">0o0</span>,</div><div class="line"> <span class="number">0o1</span>,</div><div class="line"> <span class="number">0o10</span>,</div><div class="line"> <span class="number">0o77</span></div><div class="line">];</div><div class="line"><span class="built_in">console</span>.assert(octal === [<span class="number">0</span>, <span class="number">1</span>, <span class="number">8</span>, <span class="number">63</span>]);</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> binary = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">3</span>];</div><div class="line"><span class="built_in">console</span>.assert(binary === [<span class="number">0</span>, <span class="number">1</span>, <span class="number">3</span>]);</div><div class="line"></div><div class="line"><span class="keyword">var</span> octal = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">8</span>, <span class="number">63</span>];</div><div class="line"><span class="built_in">console</span>.assert(octal === [<span class="number">0</span>, <span class="number">1</span>, <span class="number">8</span>, <span class="number">63</span>]);</div></pre></td></tr></table></figure>
<p>Property Method Assignment</p>
<p>Method syntax is supported in object initializers, for example see toString():</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> object = {</div><div class="line"> value: <span class="number">42</span>,</div><div class="line"> toString() {</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.value;</div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(object.toString() === <span class="number">42</span>);</div><div class="line"><span class="comment">// -> true</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> object = {</div><div class="line"> value: <span class="number">42</span>,</div><div class="line"> toString: <span class="function"><span class="keyword">function</span> <span class="title">toString</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.value;</div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(object.toString() === <span class="number">42</span>);</div><div class="line"><span class="comment">// -> true</span></div></pre></td></tr></table></figure>
<p>Object Initializer Shorthand</p>
<p>This allows you to skip repeating yourself when the property name and property value are the same in an object literal.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getPoint</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> x = <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> y = <span class="number">10</span>;</div><div class="line"></div><div class="line"> <span class="keyword">return</span> {x, y};</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(getPoint() === {</div><div class="line"> x: <span class="number">1</span>,</div><div class="line"> y: <span class="number">10</span></div><div class="line">});</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getPoint</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> x = <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> y = <span class="number">10</span>;</div><div class="line"></div><div class="line"> <span class="keyword">return</span> { x: x, y: y };</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(getPoint() === {</div><div class="line"> x: <span class="number">1</span>,</div><div class="line"> y: <span class="number">10</span></div><div class="line">});</div></pre></td></tr></table></figure>
<p>Rest Parameters</p>
<p>Rest parameters allows your functions to have variable number of arguments without using the arguments object.</p>
<p>The rest parameter is an instance of Array so all the array methods just work.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, ...y</span>) </span>{</div><div class="line"> <span class="comment">// y is an Array</span></div><div class="line"> <span class="keyword">return</span> x * y.length;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>, <span class="string">'hello'</span>, <span class="literal">true</span>) === <span class="number">6</span>);</div><div class="line"><span class="comment">// -> true</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">var</span> y = [];</div><div class="line"> y.push.apply(y, <span class="built_in">arguments</span>) && y.shift();</div><div class="line"></div><div class="line"> <span class="comment">// y is an Array</span></div><div class="line"> <span class="keyword">return</span> x * y.length;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>, <span class="string">'hello'</span>, <span class="literal">true</span>) === <span class="number">6</span>);</div><div class="line"><span class="comment">// -> true</span></div></pre></td></tr></table></figure>
<p>Spread Operator</p>
<p>The spread operator is like the reverse of rest parameters. It allows you to expand an array into multiple formal parameters.</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a, b</span>) </span>{</div><div class="line"> <span class="keyword">return</span> a + b;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">let</span> nums = [<span class="number">5</span>, <span class="number">4</span>];</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(add(...nums));</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> _toArray = <span class="function"><span class="keyword">function</span> (<span class="params">arr</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="built_in">Array</span>.isArray(arr) ? arr : [].slice.call(arr);</div><div class="line">};</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a, b</span>) </span>{</div><div class="line"> <span class="keyword">return</span> a + b;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">var</span> nums = [<span class="number">5</span>, <span class="number">4</span>];</div><div class="line"><span class="built_in">console</span>.log(add.apply(<span class="literal">null</span>, _toArray(nums)));</div></pre></td></tr></table></figure>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, y, z</span>) </span>{</div><div class="line"> <span class="keyword">return</span> x + y + z;</div><div class="line">}</div><div class="line"><span class="comment">// Pass each elem of array as argument</span></div><div class="line">f(...[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]) === <span class="number">6</span>;</div></pre></td></tr></table></figure>
<p>ES5:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, y, z</span>) </span>{</div><div class="line"> <span class="keyword">return</span> x + y + z;</div><div class="line">}</div><div class="line"><span class="comment">// Pass each elem of array as argument</span></div><div class="line">f.apply(<span class="literal">null</span>, [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]) === <span class="number">6</span>;</div></pre></td></tr></table></figure>
<p>Proxying a function object</p>
<p>ES6:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> target = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'I am the target'</span>;</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">var</span> handler = {</div><div class="line"> apply: <span class="function"><span class="keyword">function</span> (<span class="params">receiver, ...args</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'I am the proxy'</span>;</div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> <span class="built_in">Proxy</span>(target, handler);</div><div class="line"><span class="built_in">console</span>.log(p() === <span class="string">'I am the proxy'</span>);</div><div class="line"><span class="comment">// -> true</span></div></pre></td></tr></table></figure>
<p>ES5:</p>
<p>No proxy in ES5, hard to intercept noSuchMethod and others.</p>
<p>About</p>
<p>Inspired by:</p>
<p><a href="http://tc39wiki.calculist.org/es6/" target="_blank" rel="external">ES6 Feature Proposals</a><br><a href="https://github.com/lukehoban/es6features" target="_blank" rel="external">ES6 Features</a><br><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla" target="_blank" rel="external">ECMAScript 6 support in Mozilla</a><br><a href="https://babeljs.io/" target="_blank" rel="external">Babel</a><br><a href="http://jsrocks.org/" target="_blank" rel="external">JS Rocks</a></p>
]]></content>
<summary type="html">
<p><strong>原文链接：<a href="https://github.com/addyosmani/es6-equivalents-in-es5" target="_blank" rel="external">https://github.com/addyosmani/
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
</entry>
<entry>
<title>面试(一)</title>
<link href="http://zhangzirui.com/2016/09/24/2016/09/interviewquestion(1)/"/>
<id>http://zhangzirui.com/2016/09/24/2016/09/interviewquestion(1)/</id>
<published>2016-09-24T12:10:50.000Z</published>
<updated>2016-09-25T05:08:40.000Z</updated>
<content type="html"><![CDATA[<p>今天出去面试了，星期六，嘉定，金沙江西路。</p>
<p>面试的题目大概4个：</p>
<p>1.实现一个基于数组底层的循环队列？<br>2.node中require时模块会加载多次吗？<br>3.Dom中如果一个元素绑定多个click方法，点击后会怎么样？<br>4.jq中那种选择器效率最高？</p>
<p>答得不是很好，感觉自己还是略有些紧张，不过面试官很和善也很有耐心，虽然被录取希望不大，但是还是很开心能有这次面试。</p>
<p>下面是答案：</p>
<p>1.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//循环队列</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">CircleQueue</span>(<span class="params">size</span>)</span>{</div><div class="line"> <span class="keyword">this</span>.initQueue(size);</div><div class="line">}</div><div class="line">CircleQueue.prototype = {</div><div class="line"> <span class="comment">//初始化队列</span></div><div class="line"> initQueue : <span class="function"><span class="keyword">function</span>(<span class="params">size</span>)</span>{</div><div class="line"> <span class="keyword">this</span>.size = size;</div><div class="line"> <span class="keyword">this</span>.list = <span class="keyword">new</span> <span class="built_in">Array</span>();</div><div class="line"> <span class="keyword">this</span>.capacity = size + <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.head = <span class="number">0</span>;</div><div class="line"> <span class="keyword">this</span>.tail = <span class="number">0</span>;</div><div class="line"> },</div><div class="line"><span class="comment">//压入队列</span></div><div class="line"> enterQueue : <span class="function"><span class="keyword">function</span>(<span class="params">ele</span>)</span>{</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> ele == <span class="string">"undefined"</span> || ele == <span class="string">""</span>){</div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">var</span> pos = (<span class="keyword">this</span>.tail + <span class="number">1</span>) % <span class="keyword">this</span>.capacity;</div><div class="line"> <span class="keyword">if</span>(pos == <span class="keyword">this</span>.head){<span class="comment">//判断队列是否已满</span></div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> <span class="keyword">this</span>.list[<span class="keyword">this</span>.tail] = ele;</div><div class="line"> <span class="keyword">this</span>.tail = pos;</div><div class="line"> }</div><div class="line"> },</div><div class="line"><span class="comment">//从队列中取出头部数据</span></div><div class="line"> delQueue : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">this</span>.tail == <span class="keyword">this</span>.head){ <span class="comment">//判断队列是否为空</span></div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> <span class="keyword">var</span> ele = <span class="keyword">this</span>.list[<span class="keyword">this</span>.head];</div><div class="line"> <span class="keyword">this</span>.head = (<span class="keyword">this</span>.head + <span class="number">1</span>) % <span class="keyword">this</span>.capacity;</div><div class="line"> <span class="keyword">return</span> ele;</div><div class="line"> }</div><div class="line"> },</div><div class="line"><span class="comment">//查询队列中是否存在此元素，存在返回下标，不存在返回-1</span></div><div class="line"> find : <span class="function"><span class="keyword">function</span>(<span class="params">ele</span>)</span>{</div><div class="line"> <span class="keyword">var</span> pos = <span class="keyword">this</span>.head;</div><div class="line"> <span class="keyword">while</span>(pos != <span class="keyword">this</span>.tail){</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">this</span>.list[pos] == ele){</div><div class="line"> <span class="keyword">return</span> pos;</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> pos = (pos + <span class="number">1</span>) % <span class="keyword">this</span>.capacity;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</div><div class="line"> },</div><div class="line"><span class="comment">//返回队列中的元素个数</span></div><div class="line"> queueSize : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">return</span> (<span class="keyword">this</span>.tail - <span class="keyword">this</span>.head + <span class="keyword">this</span>.capacity) % <span class="keyword">this</span>.capacity;</div><div class="line"> },</div><div class="line"><span class="comment">//清空队列</span></div><div class="line"> clearQueue : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">this</span>.head = <span class="number">0</span>;</div><div class="line"> <span class="keyword">this</span>.tail = <span class="number">0</span>;</div><div class="line"> },</div><div class="line"><span class="comment">//判断队列是否为空</span></div><div class="line"> isEmpty : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">this</span>.head == <span class="keyword">this</span>.tail){</div><div class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure></p>
<p>2.<br>不会，module中又module.load机制，会对已经加载的module进行缓存。</p>
<p>3.<br>方法都会执行，因为js是异步的，但是执行的顺序并不能保证。</p>
<p>4.<br>ID > Tag > Class</p>
<p>ID 选择器是速度最快的，这主要是因为它使用 JavaScript 的内置函数 getElementById()；</p>
<p>其次是类型选择器，因为它使用 JavaScript 的内置函数 getElementsByTag()；</p>
<p>速度最慢的是 Class 选择器，其需要通过解析 HTML</p>
<p>文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。</p>
<p>选择器性能优化建议:</p>
<p>尽量使用 ID 选择器</p>
<p>少直接使用 Class 选择器，尽量结合 Tag 使用，如 input.myclass</p>
<p>多用父子关系，少用嵌套关系</p>
<p>缓存 jQuery 对象</p>
<p>链式调用</p>
<p>还有，像$(“div .f1”).eq(0) 和$(“div .f1”).first() 效率差不多，有时会差几毫秒。 $(“div .f1:eq(0)”) 这个最慢了。</p>
]]></content>
<summary type="html">
<p>今天出去面试了，星期六，嘉定，金沙江西路。</p>
<p>面试的题目大概4个：</p>
<p>1.实现一个基于数组底层的循环队列？<br>2.node中require时模块会加载多次吗？<br>3.Dom中如果一个元素绑定多个click方法，点击后会怎么样？<br>4.jq
</summary>
<category term="面试" scheme="http://zhangzirui.com/categories/%E9%9D%A2%E8%AF%95/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
</entry>
<entry>
<title>restful服务中post/put/patch的区别</title>
<link href="http://zhangzirui.com/2016/09/22/2016/09/restfulgetpostpatch/"/>
<id>http://zhangzirui.com/2016/09/22/2016/09/restfulgetpostpatch/</id>
<published>2016-09-22T11:10:50.000Z</published>
<updated>2016-09-28T05:54:52.000Z</updated>
<content type="html"><![CDATA[<p>这几天用express+mongoose来实现restful api，get、post、put和delete都实现了，用postman调试也没问题，这时看到有patch这个方法。上网查了一下，了解了post、put与patch之间的区别，这里做下简单的总结。</p>
<p>RESTFUL中四个基本的方法</p>
<p>POST = 新增<br>GET = 读取<br>PUT = 更新<br>DELETE = 刪除</p>
<p>HTTP的POST/PUT方法，这两个方法似乎都可以用来创建或更新一个资源。</p>
<p>区别是细微但清楚的：</p>
<p>POST方法用来创建一个子资源，如 /api/users，会在users下面创建一个user，如users/1</p>
<p>POST方法不是幂等的，多次执行，将导致多条相同的用户被创建（users/1，users/2 …而这些用户除了自增长id外有着相同的数据，除非你的系统实现了额外的数据唯一性检查）</p>
<p>而PUT方法用来创建一个URI已知的资源，或对已知资源进行完全替换，比如users/1，</p>
<p>因此PUT方法一般会用来更新一个已知资源，除非在创建前，你完全知道自己要创建的对象的URI。</p>
<p>这里是PUT跟POST，那么PUT与PATCH呢，PUT可以理解为replace（create or update），例如put /user/1的意思是替换/user/1，如果user/1已经存在那么就替换，如果没有那么就创建。PUT必须包含/user/1的所有属性资料。</p>
<p>但是如果只是为了更新/user/1下的一个属性值，那么使用PUT就显得太过笨重，因为需要传入/user/1的所有属性值。这里就可以使用PATCH，用来做局部更新</p>
<p>下面是express实现的restful的代码，代码比较简单，只是表达下POST，PUT，PATCH这些api</p>
<p>POST<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">router.post(<span class="string">'/users'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>{</div><div class="line"> <span class="keyword">var</span> name = req.body.userName;</div><div class="line"> <span class="keyword">var</span> password = req.body.password;</div><div class="line"> <span class="keyword">var</span> resbody = { state: <span class="string">''</span> };</div><div class="line"> <span class="keyword">var</span> md5 = crypto.createHash(<span class="string">'md5'</span>);</div><div class="line"> <span class="keyword">var</span> password = md5.update(password).digest(<span class="string">'hex'</span>);</div><div class="line"> <span class="keyword">var</span> user = <span class="keyword">new</span> db.User({</div><div class="line"> name: name,</div><div class="line"> password: password</div><div class="line"> });</div><div class="line"> <span class="keyword">var</span> check = finduser(db.User, { name: name });</div><div class="line"> <span class="keyword">if</span> (check) {</div><div class="line"> resbody.state = <span class="string">'fail'</span>;</div><div class="line"> res.send(resbody)</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> user.save(<span class="function"><span class="keyword">function</span>(<span class="params">err, user</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(err);</div><div class="line"> }</div><div class="line"> resbody.state = <span class="string">'success'</span>;</div><div class="line"> res.send(resbody)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> next();</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>PUT<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//change user's password</span></div><div class="line">router.put(<span class="string">'/users/:id'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (req.body.id) {</div><div class="line"> <span class="keyword">var</span> obj = {</div><div class="line"> name: req.body.name,</div><div class="line"> password: req.body.password</div><div class="line"> }</div><div class="line"></div><div class="line"> db.User.findByIdAndUpdate(req.body.id, obj).exec();</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">var</span> newUser = <span class="keyword">new</span> db.User({</div><div class="line"> name: req.body.name,</div><div class="line"> password: req.body.password</div><div class="line"> })</div><div class="line"> newUser.save(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (err) <span class="keyword">return</span> <span class="built_in">console</span>.log(err)</div><div class="line"> })</div><div class="line"> }</div><div class="line"></div><div class="line"> res.send(<span class="string">'OK'</span>)</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>PATCH<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//change user's password</span></div><div class="line">router.put(<span class="string">'/users/:id'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>) </span>{</div><div class="line"> <span class="keyword">var</span> id = req.params.id,</div><div class="line"> password = req.body.updatepassword;</div><div class="line"></div><div class="line"> db.User.findOneAndUpdate({ id: name }, { $set: { password: password } }, <span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> <span class="built_in">console</span>.log(err)</div><div class="line"> }</div><div class="line"> res.send(<span class="string">'update success'</span>);</div><div class="line"> });</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>最后，放上URI的区别URL<br>关于URI和URL：<br>URI—Universal Resource Identifier通用资源标志符<br>Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的<br>URI一般由三部组成<br>①访问资源的命名机制<br>②存放资源的主机名<br>③资源自身的名称，由路径表示，着重强调于资源。</p>
<p>URL—Uniform Resource Location统一资源定位符<br>URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。<br>采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。<br>URL一般由三部组成<br>①协议(或称为服务方式)<br>②存有该资源的主机IP地址(有时也包括端口号)<br>③主机资源的具体地址。如目录和文件名等</p>
]]></content>
<summary type="html">
<p>这几天用express+mongoose来实现restful api，get、post、put和delete都实现了，用postman调试也没问题，这时看到有patch这个方法。上网查了一下，了解了post、put与patch之间的区别，这里做下简单的总结。</p>
<p>
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="restful" scheme="http://zhangzirui.com/tags/restful/"/>
</entry>
<entry>
<title>学习Vue(一)</title>
<link href="http://zhangzirui.com/2016/09/20/2016/09/studyvue2/"/>
<id>http://zhangzirui.com/2016/09/20/2016/09/studyvue2/</id>
<published>2016-09-20T12:10:50.000Z</published>
<updated>2016-09-25T04:44:32.000Z</updated>
<content type="html"><![CDATA[<p>在github上看到一个不错的demo，是基于express+mongo+vue的，基本实现了前后端分离，感觉就是自己需要的，于是“可耻的”拿过来学习，并移植到了自己的leancloud上。</p>
<p>原本作者的案例代码在此：<a href="https://github.com/ycwalker/CMS-of-Blog" target="_blank" rel="external">https://github.com/ycwalker/CMS-of-Blog</a></p>
<p>我移植的leancloud地址如下：<a href="http://juejin.leanapp.cn/#!/" target="_blank" rel="external">http://juejin.leanapp.cn/#!/</a></p>
<p>整个项目使用express提供api,mongoose存储数据，我使用了mongolab这个平台，有500MB的免费空间。</p>
<p>项目的功能很简单，后台录入文章，前台展示。还加了用户登陆功能，不过很简陋。我准备添加一个注册功能。</p>
<p>文章也只是简单的markdown转换，并没有评论和点赞功能。</p>
<p>有待提升😁</p>
]]></content>
<summary type="html">
<p>在github上看到一个不错的demo，是基于express+mongo+vue的，基本实现了前后端分离，感觉就是自己需要的，于是“可耻的”拿过来学习，并移植到了自己的leancloud上。</p>
<p>原本作者的案例代码在此：<a href="https://githu
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
<category term="vue" scheme="http://zhangzirui.com/tags/vue/"/>
</entry>
<entry>
<title>苹果首页轮播案例实现</title>
<link href="http://zhangzirui.com/2016/09/19/2016/09/applebannerdemo/"/>
<id>http://zhangzirui.com/2016/09/19/2016/09/applebannerdemo/</id>
<published>2016-09-18T16:00:00.000Z</published>
<updated>2016-09-19T13:51:04.000Z</updated>
<content type="html"><![CDATA[<p>好久没更新了，昨天朱同学说苹果官网的新轮播不错，还说他们公司的前端觉得要花3天才能做出来。我说我一天就行，他不服，没办法，今天花了一下午做了一下（没使用任何js库）。完成了一个小demo，轮播还有些bug要修改，因为是通过修改transform的translate3d属性来实现轮播的，跟之前修改left属性不太一样，无限轮播的实现方法也需要改变，目前还在思考，但是案例已经做出来，放到github上，地址</p>
<p><a href="http://www.zhangzirui.com/appleBannerdemo/" target="_blank" rel="external">http://www.zhangzirui.com/appleBannerdemo/</a></p>
<p>轮播的实现谷歌一下能搜出好多个来，有使用库的有原生的，看需求，之前在公司PC端轮播使用jq手写，移动web上就使用swiper，强大、好用。</p>
<p>样式上，也就是css主要给几个元素设置了transition,使过度平滑，css3里强大的动画属性使得以前用js写的特效现在可以放心简洁的使用css来实现，当然，要考虑兼容。js更多的是做控制的作用。<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">-moz-transition: transform 1.5s;</div><div class="line">/* Firefox 4 */</div><div class="line">-webkit-transition: transform 1.5s;</div><div class="line">/* Safari and Chrome */</div><div class="line">-o-transition: transform 1.5s;</div><div class="line">/* Opera */</div></pre></td></tr></table></figure></p>
<p>js代码里写了3个计时器，用来实现图片的轮播，圆点的过度动画（dash），还有就是一个200ms运行一次的监测body.clientWidth的计时器。</p>
<p>代码都很简单，这里就不贴了。有兴趣的同学可以去我的github上看：</p>
<p><a href="https://github.com/ZZR-china/appleBannerdemo/blob/master/js/banner.js" target="_blank" rel="external">https://github.com/ZZR-china/appleBannerdemo/blob/master/js/banner.js</a></p>
<p>有个收获就是谷歌到了一个很方便的替换class name的方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">dash[i].className = dash[i].className.replace( <span class="regexp">/(?:^|\s)current(?!\S)/g</span>,<span class="string">''</span>);</div><div class="line">dashprogress[i].style.transform = <span class="string">'scaleX(0)'</span>;</div></pre></td></tr></table></figure>
<p>以上。</p>
]]></content>
<summary type="html">
<p>好久没更新了，昨天朱同学说苹果官网的新轮播不错，还说他们公司的前端觉得要花3天才能做出来。我说我一天就行，他不服，没办法，今天花了一下午做了一下（没使用任何js库）。完成了一个小demo，轮播还有些bug要修改，因为是通过修改transform的translate3d属性来
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="css" scheme="http://zhangzirui.com/tags/css/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
</entry>
<entry>
<title>express开发（二）引入handlebars</title>
<link href="http://zhangzirui.com/2016/09/09/2016/09/express(2)/"/>
<id>http://zhangzirui.com/2016/09/09/2016/09/express(2)/</id>
<published>2016-09-08T16:00:00.000Z</published>
<updated>2016-09-09T15:49:50.000Z</updated>
<content type="html"><![CDATA[<p>下面我们将在项目中引入handlebars，一种抽象程度较低的模板框架。Handlebars不会视图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。相比于jade（现在已经改名为pug），虽然jade足够简洁，语法精简，但是对HTML进行了相当程度的抽象，必须对HTML有很深的理解才能良好的驾驭，而且我也不喜欢HTML被抽象化处理。所以，让我们愉快的用handlebars吧。</p>
<p>在express使用handlebars推荐使用express-handlebars，直接运行命令<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -S express-handlebars</div></pre></td></tr></table></figure></p>
<p>之后在我们的demo.js（也就是上一章中的mydemo.js，我将他改名为demo.js方便些，通常意义下的app.js）中,引入如下代码。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> exphbs = <span class="built_in">require</span>(<span class="string">'express-handlebars'</span>);</div><div class="line"><span class="keyword">var</span> hbs = exphbs.create({</div><div class="line">layoutsDir: path.join(__dirname, <span class="string">'views/layouts/'</span>),</div><div class="line">defaultLayout: <span class="string">'layout'</span>,</div><div class="line">extname: <span class="string">'.hbs'</span>,</div><div class="line">partialsDir: path.join(__dirname, <span class="string">"views/partials/"</span>),</div><div class="line">});</div><div class="line"><span class="comment">// Register `hbs.engine` with the Express app.</span></div><div class="line">app.engine(<span class="string">'hbs'</span>, hbs.engine);</div><div class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'hbs'</span>);</div></pre></td></tr></table></figure></p>
<p>写好后我们在views中创建几个文档，如下<br><img src="http://ocr3oyxoh.bkt.clouddn.com/dd60006ff928cea7f49.jpg" alt=""><br>这里我们使用实例方法引入handlebars，与直接使用exhbs引入是一样的效果。layoutDir是存放模板的目录；extname是我们设置的文件后缀，注意如果要设置后缀为html,那么app.engine(‘hbs’,hbs.engine)要改为app.engine(‘html’,hbs.engine),同理app.set中也要做相应修改。defaultLayout是默认的模板名，这里我设置的是layout；partials是局部模块，可以使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">{{>header}}</div></pre></td></tr></table></figure>
<p>语法引入到模板layout中和页面里。</p>
<p>关于express-handlebars的更多介绍可以到项目主页中看</p>
<p><a href="https://github.com/ericf/express-handlebars" target="_blank" rel="external">https://github.com/ericf/express-handlebars</a><br>完整的demo.js代码如下:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</div><div class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</div><div class="line"><span class="keyword">var</span> app = express();</div><div class="line"><span class="keyword">var</span> mainRoute = <span class="built_in">require</span>(<span class="string">'./routes/main'</span>);</div><div class="line"><span class="keyword">var</span> exphbs = <span class="built_in">require</span>(<span class="string">'express-handlebars'</span>);</div><div class="line"><span class="keyword">var</span> hbs = exphbs.create({</div><div class="line">layoutsDir: path.join(__dirname, <span class="string">'views/layouts/'</span>),</div><div class="line">defaultLayout: <span class="string">'layout'</span>,</div><div class="line">extname: <span class="string">'.hbs'</span>,</div><div class="line">partialsDir: path.join(__dirname, <span class="string">"views/partials/"</span>),</div><div class="line">});</div><div class="line"><span class="comment">// Register `hbs.engine` with the Express app.</span></div><div class="line">app.engine(<span class="string">'hbs'</span>, hbs.engine);</div><div class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'hbs'</span>);</div><div class="line">app.use(<span class="string">'/'</span>, mainRoute);</div><div class="line"><span class="comment">//定制404页面</span></div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'404'</span>);</div><div class="line">res.send(<span class="string">'404 - Not Found'</span>);</div><div class="line">});</div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</div><div class="line"><span class="built_in">console</span>.err(err.stack);</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'500'</span>);</div><div class="line">res.send(<span class="string">'500 - Server Error'</span>);</div><div class="line">});</div><div class="line">app.set(<span class="string">'port'</span>, process.env.PORT || <span class="number">3000</span>);</div><div class="line">app.listen(app.get(<span class="string">'port'</span>), <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Express is started on http://localhost:'</span> + app.get(<span class="string">'port'</span>) + <span class="string">';press Ctrl + C to terminate.'</span>);</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>（PS:我们引入了node中path模块来管理我们的路径，关于path大家可以看这篇文章：<a href="http://www.jianshu.com/p/fe41ee02efc8）" target="_blank" rel="external">http://www.jianshu.com/p/fe41ee02efc8）</a></p>
<p>这样就将handlebars引入了我们的项目。</p>
<p>简单的创几个hbs文件来运行验证我们做的对不对。在lauout.hbs中输入</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></div><div class="line"><span class="tag"><<span class="name">title</span>></span>demo<span class="tag"></<span class="name">title</span>></span></div><div class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"/stylesheets/main.min.css"</span>></span></div><div class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"/stylesheets/font-awesome.min.css"</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/javascripts/require.js"</span> <span class="attr">defer</span> <span class="attr">async</span>=<span class="string">"true"</span> <span class="attr">data-main</span>=<span class="string">"/javascripts/main"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line">{{> header}}</div><div class="line"><span class="tag"><<span class="name">main</span>></span></div><div class="line">{{> pages/title}}</div><div class="line">{{{body}}}</div><div class="line"><span class="tag"></<span class="name">main</span>></span></div><div class="line">{{> footer}}</div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">{{{body}}}</div></pre></td></tr></table></figure>
<p>就是路由中渲染的hbs，其他部分都是固定的模板，这里是可变的，可以是home.hbs，error.hbs。在路由中设置即可，如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>)</span>{</div><div class="line">res.render(<span class="string">'home'</span>, {});</div><div class="line">});</div></pre></td></tr></table></figure>
<p>我们就这设置了，’/‘这个路由渲染的是home.hbs但是用的模板是layout.hbs这个模板。</p>
<p>partials中的几个文件分别输入</p>
<p>footer.hbs中输入<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">footer</span>></span></div><div class="line">this is footer</div><div class="line"><span class="tag"></<span class="name">footer</span>></span></div></pre></td></tr></table></figure></p>
<p>header.hbs中<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">header</span>></span>this is header<span class="tag"></<span class="name">header</span>></span></div></pre></td></tr></table></figure></p>
<p>pages中title输入<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span>></span>thi is title<span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
<p>之后在home.hbs中输入：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span>></span>thi is home<span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
<p>之后设置路由：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res, next</span>)</span>{</div><div class="line">res.render(<span class="string">'home'</span>, {});</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>运行node demo.js或者npm start</p>
<p>(PS:我在package.json中设置了”start”:”supervisor demo.js”,supervisor是一个node的进程守护模块，我们可以用npm install -g supervisor来全局安装他，当然也可以只在本项目中引入，也可以使用别的进程守护模块想forever等，这里我们使用supervisor。)</p>
<p>就可以看到localhost:3000中显示了<br><img src="http://ocr3oyxoh.bkt.clouddn.com/dd6000709daa4d60e52.jpg" alt=""><br>到这里我们已经在项目里引入了handlebars，但是还有好多handlebars的特性没介绍（helper等），如果大家想深入了解handlebars，推荐去官网上访问。</p>
<p>（我的项目上传到github上，并且打了标签，课程一就是class01，二几十class02，欢迎访问<br><a href="https://github.com/ZZR-china/node_express" target="_blank" rel="external">https://github.com/ZZR-china/node_express</a><br>）</p>
]]></content>
<summary type="html">
<p>下面我们将在项目中引入handlebars，一种抽象程度较低的模板框架。Handlebars不会视图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。相比于jade（现在已经改名为pug），虽然jade足够简洁，语法精简，但是对HTM
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="node" scheme="http://zhangzirui.com/tags/node/"/>
<category term="express" scheme="http://zhangzirui.com/tags/express/"/>
</entry>
<entry>
<title>express开发（一）简介与搭建</title>
<link href="http://zhangzirui.com/2016/09/08/2016/09/express(1)/"/>
<id>http://zhangzirui.com/2016/09/08/2016/09/express(1)/</id>
<published>2016-09-07T16:00:00.000Z</published>
<updated>2016-09-08T13:17:30.000Z</updated>
<content type="html"><![CDATA[<p>上周末去了趟上海书城，不愧是上海数得上号的书城，流行的科技书应有尽有，话不多说直接上图。</p>
<p>最经典的C语言O(∩_∩)O<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%281%29.jpg" alt="enter image description here"><br>最流行的java(づ￣ 3￣)づ<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%282%29.jpg" alt="enter image description here"><br>超酷的R语言/(ㄒoㄒ)/~~<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%283%29.jpg" alt="enter image description here"><br>然而，身为一个坚定的前端JSer，我还是选择了Node与javascript<br>上图！<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%284%29.jpg" alt="enter image description here"><br>Node赛高！Express赛高！<br>下面让题主来以一个长者的身份讲讲对express的简单理解，看完后你们还会知道怎样搭建一个属于自己的简单的express服务端。（此中有膜意，欲辩已忘言。）</p>
<h2 id="Express简介"><a href="#Express简介" class="headerlink" title="Express简介"></a>Express简介</h2><p>Express网站(<a href="http://expressjs.com/)上是这样介绍Express的:"Fast" target="_blank" rel="external">http://expressjs.com/)上是这样介绍Express的:"Fast</a>, unopinionated, minimalist web framework for Node.js”。翻译过来就是：“精简的、灵活的Node.js Web程序框架，为构建单页、多页及混合的Web程序提供了一系列健壮的功能特性。”（没错，翻译过来就是这么长）<br>Express的缔造者TJ·Holowaychuk说Express是在Sinatra的启发下创建的，后者是一个基于Ruby的框架。Express借鉴一个Ruby上的框架并不奇怪：Ruby致力于让Web开发变得更快、更高效、更可维护，并衍生了大量的Web开发方式。<br>Express还与Node的一个插件–connect有紧密的联系，然而在Express4.0中，connect插件被去掉了，只剩下了static中间件。</p>
<h3 id="搭建一个简单的项目"><a href="#搭建一个简单的项目" class="headerlink" title="搭建一个简单的项目"></a>搭建一个简单的项目</h3><p>下面我们要建一个简单的基于express4.0的小项目，会实现一些基础的功能：<br>定制404、500页面<br>使用express中的res.send、res.set、res.status替换Node中自带的res.end、res.writeHead<br>了解express中的路由<br>首先用npm安装express，在你的文件夹下，如test中运行<br>npm init<br>初始化之后，运行<br>npm install -S express<br>这样npm会将express下载道node_modules中，并更新你的package.json文件，将express写入你的依赖中。<br>接下来创建一个mydemo.js文件，作为我们项目的入口。<br>(Node与Express开发的作者Ethan Brown任务，项目的入口文件命名不应该是千篇一律的index.js或者app.js，应该基于你的项目名来命名。npm init默认的使用index.js，如果你使用了别的文件来做主文件，记得修改package.json中的main属性。)<br>在其中输入如下代码：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</div><div class="line"><span class="keyword">var</span> app = express();</div><div class="line">app.set(<span class="string">'port'</span>, process.env.PORT || <span class="number">3000</span>);</div><div class="line"><span class="comment">//定制404页面</span></div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'404'</span>);</div><div class="line">res.send(<span class="string">'404 - Not Found'</span>);</div><div class="line">});</div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</div><div class="line"><span class="built_in">console</span>.err(err.stack);</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'500'</span>);</div><div class="line">res.send(<span class="string">'500 - Server Error'</span>);</div><div class="line">});</div><div class="line">app.listen(app.get(<span class="string">'port'</span>), <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Express is started on http://localhost:'</span> + app.get(<span class="string">'port'</span>) + <span class="string">';press Ctrl + C to terminate.'</span>);</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>然后在命令行输入<br>node mydemo.js<br>访问<a href="http://localhost:3000/你会看到它返回了一个404页面，因为你还没设置“/”路径。" target="_blank" rel="external">http://localhost:3000/你会看到它返回了一个404页面，因为你还没设置“/”路径。</a><br>现在我们的项目结构如下。<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%285%29.jpg" alt="enter image description here"></p>
<p>现在，我们给首页和关于页面加上路由。在404处理器之前加上两个新路由。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line">app.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.send(<span class="string">'mydemo home page'</span>);</div><div class="line">});</div><div class="line">app.get(<span class="string">'/about'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.send(<span class="string">'about page'</span>);</div><div class="line">})</div><div class="line"><span class="comment">//定制404页面</span></div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'404'</span>);</div><div class="line">res.send(<span class="string">'404 - Not Found'</span>);</div><div class="line">});</div></pre></td></tr></table></figure>
<p>Express官方文档中有这样一个命令——app.VERB。这里的app.VERB并不是一个具体的方法，而是自带HTTP的动词（最常见的是get和post）。这种方法有两个参数：一个路径和一个函数。<br>之后再次运行程序，就可以看到我们的首页和about页面了。</p>
<h3 id="分离路由"><a href="#分离路由" class="headerlink" title="分离路由"></a>分离路由</h3><p>现在我们对程序做一些小小的改动，是的路由跟项目入口文件分离开来，这在大型项目中是必要的过程，因为路由一旦过多再跟启动文件混合在一起就不易维护，所以要将他们分离开来。<br>创建一个新的文件夹routes，在其中创建文件main.js<br>输入如下代码：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="keyword">var</span> router = <span class="built_in">require</span>(<span class="string">'express'</span>).Router();</div><div class="line">router.get(<span class="string">'/'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.send(<span class="string">'mydemo home page'</span>);</div><div class="line">});</div><div class="line">router.get(<span class="string">'/about'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.send(<span class="string">'about page'</span>);</div><div class="line">})</div><div class="line"><span class="built_in">module</span>.exports = router;</div></pre></td></tr></table></figure></p>
<p>这里使用了express的router方法，是express推荐的router中间件，使用也很简单，跟之前用app实例直接操作路由没太大的区别。之后我们将mydemo.js修改如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</div><div class="line"><span class="keyword">var</span> app = express();</div><div class="line"><span class="keyword">var</span> main = <span class="built_in">require</span>(<span class="string">'./routes/main'</span>);</div><div class="line">app.set(<span class="string">'port'</span>, process.env.PORT || <span class="number">3000</span>);</div><div class="line">app.use(<span class="string">'/'</span>, main);</div><div class="line"><span class="comment">//定制404页面</span></div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req, res</span>)</span>{</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'404'</span>);</div><div class="line">res.send(<span class="string">'404 - Not Found'</span>);</div><div class="line">});</div><div class="line">app.use(<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</div><div class="line"><span class="built_in">console</span>.err(err.stack);</div><div class="line">res.type(<span class="string">'text/plain'</span>);</div><div class="line">res.status(<span class="string">'500'</span>);</div><div class="line">res.send(<span class="string">'500 - Server Error'</span>);</div><div class="line">});</div><div class="line">app.listen(app.get(<span class="string">'port'</span>), <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'Express is started on http://localhost:'</span> + app.get(<span class="string">'port'</span>) + <span class="string">';press Ctrl + C to terminate.'</span>);</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>我们用var main = require(‘./routes/main’);引入创建的route文件，再用app.use(‘/‘,main)使用。运行后会发现，效果跟之前是一样的。当然你也可以设置app.use(‘/tset’, main)。这样你要访问localhost:3000/test和localhost:3000/test/about才能看到你设置的两个路由。<br>现在我们的项目结构如下：<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%286%29.jpg" alt="enter image description here"></p>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>我们用express搭建了一个简单的项目，使用了router中间件，app.get，app.set方法。<br>之后我们会讲exprss中的视图和布局，并使用handlebars来作为我们的前端模板。<br>大家可以访问我的github。<br><a href="https://github.com/ZZR-china/node_express" target="_blank" rel="external">https://github.com/ZZR-china/node_express</a><br>做了些微小的工作，谢谢大家。</p>
]]></content>
<summary type="html">
<p>上周末去了趟上海书城，不愧是上海数得上号的书城，流行的科技书应有尽有，话不多说直接上图。</p>
<p>最经典的C语言O(∩_∩)O<br><img src="http://ocr3oyxoh.bkt.clouddn.com/98%20%281%29.jpg" alt="e
</summary>
<category term="后端" scheme="http://zhangzirui.com/categories/%E5%90%8E%E7%AB%AF/"/>
<category term="node" scheme="http://zhangzirui.com/tags/node/"/>
<category term="express" scheme="http://zhangzirui.com/tags/express/"/>
</entry>
<entry>
<title>学习Vue(一)</title>
<link href="http://zhangzirui.com/2016/09/02/2016/09/studyvue1/"/>
<id>http://zhangzirui.com/2016/09/02/2016/09/studyvue1/</id>
<published>2016-09-02T14:10:50.000Z</published>
<updated>2016-09-05T06:41:56.000Z</updated>
<content type="html"><![CDATA[<p>因为想用leancloud开发自己的app嘛，所以进行了一些构想，我初期的设想是，express+leancloud搭建后台，vue搭建前台，并处理一些逻辑。</p>
<p>Vue是早就知道的，但一直也就知识了解没深入研究过。所以在<a href="http://web.jobbole.com/" target="_blank" rel="external">伯乐在线</a>找了<a href="http://web.jobbole.com/87375/" target="_blank" rel="external">这篇文章</a>。想把vue从头学习一下，当然官方的文档我也是看了的。</p>
<p>因为用了vue的脚手架，里面的一些配置还是不适应，尤其是eslint…经常报一些格式上的错误，导致程序都无法运行。没办法，这次只能规规矩矩的写，毕竟之前在公司也没什么硬性的代码格式规定，但是既然是自己做项目，那么就要规范起来。<br>在.eslintrc中写入了<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="string">'rules'</span>: {</div><div class="line"> <span class="string">'import/no-unresolved'</span>: <span class="number">0</span>,</div><div class="line"> <span class="comment">// allow debugger during development</span></div><div class="line"> <span class="string">'no-debugger'</span>: process.env.NODE_ENV === <span class="string">'production'</span> ? <span class="number">2</span> : <span class="number">0</span>,</div><div class="line"> <span class="string">"no-console"</span>:<span class="number">0</span>,</div><div class="line"> <span class="string">"indent"</span>: [<span class="number">2</span>, <span class="number">2</span>, {<span class="string">"VariableDeclarator"</span>: <span class="number">2</span>}]</div><div class="line"> }</div></pre></td></tr></table></figure></p>
<p><em>no-console</em>使得写入console.log命令时eslint不会报错。</p>
<p><em>Vue.js 60 分钟快速入门</em>看完后的确对vue熟悉了起来，加上脚手架对vue的亲和性，很快的上手起来。最后的那个例子还了解了vue中内置的一些很方便的方法。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.people.push(<span class="keyword">this</span>.newPerson);</div></pre></td></tr></table></figure></p>
<p>这段代码就似的newPerson这个字段插入了people这个字段中。随后我们就可以在people中访问新插入的newPerson数据。<br>随后我到官网看了下vue-router,并在测试demo中引入。<br>首先是在项目中安装vue-router。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -S vue-router</div></pre></td></tr></table></figure></p>
<p>之后在APP.vue对应的js上做修改。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</div><div class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span>;</div><div class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span>;</div><div class="line"><span class="comment">// import routeMap from './router';</span></div><div class="line"><span class="comment">/* eslint-disable no-new */</span></div><div class="line"><span class="comment">// new Vue({</span></div><div class="line"><span class="comment">// el: 'body',</span></div><div class="line"><span class="comment">// components: { App },</span></div><div class="line"></div><div class="line"><span class="comment">// });</span></div><div class="line"></div><div class="line">Vue.use(VueRouter);</div><div class="line"></div><div class="line"><span class="keyword">const</span> Foo = Vue.extend({</div><div class="line"> template: <span class="string">'<p>This is foo!</p>'</span>,</div><div class="line">});</div><div class="line"></div><div class="line"><span class="keyword">const</span> Bar = Vue.extend({</div><div class="line"> template: <span class="string">'<p>This is bar!</p>'</span>,</div><div class="line">});</div><div class="line"></div><div class="line"><span class="comment">// 创建一个路由器实例</span></div><div class="line"><span class="comment">// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置</span></div><div class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter();</div><div class="line"></div><div class="line"><span class="comment">// 定义路由规则</span></div><div class="line"><span class="comment">// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend</span></div><div class="line"><span class="comment">// 创建的组件构造函数，也可以是一个组件选项对象。</span></div><div class="line"><span class="comment">// 稍后我们会讲解嵌套路由</span></div><div class="line">router.map({</div><div class="line"> <span class="string">'/foo'</span>: {</div><div class="line"> component: Foo,</div><div class="line"> },</div><div class="line"> <span class="string">'/bar'</span>: {</div><div class="line"> component: Bar,</div><div class="line"> },</div><div class="line">});</div><div class="line"></div><div class="line"><span class="comment">// 现在我们可以启动应用了！</span></div><div class="line"><span class="comment">// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。</span></div><div class="line">router.start(App, <span class="string">'app'</span>);</div></pre></td></tr></table></figure></p>
<p>之后对vue还会深入的( ‵▽′)ψ</p>
]]></content>
<summary type="html">
<p>因为想用leancloud开发自己的app嘛，所以进行了一些构想，我初期的设想是，express+leancloud搭建后台，vue搭建前台，并处理一些逻辑。</p>
<p>Vue是早就知道的，但一直也就知识了解没深入研究过。所以在<a href="http://web.j
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="js" scheme="http://zhangzirui.com/tags/js/"/>
<category term="vue" scheme="http://zhangzirui.com/tags/vue/"/>
</entry>
<entry>
<title>使用leancloud搭建自己的webapp(一)</title>
<link href="http://zhangzirui.com/2016/09/01/2016/09/leancloud(1)/"/>
<id>http://zhangzirui.com/2016/09/01/2016/09/leancloud(1)/</id>
<published>2016-08-31T16:00:00.000Z</published>
<updated>2016-11-06T13:37:20.000Z</updated>
<content type="html"><![CDATA[<p>今天按照<a href="https://leancloud.cn/docs/sdk_setup-js.html" target="_blank" rel="external">leancloud</a>的文档搭建了一个简单的todo应用，主要是体验一下他们的后端API，使用一下基于restful的后端服务。</p>
<p>todo应用在<a href="http://wind.leanapp.cn/" target="_blank" rel="external">这个二级域名下</a>，leancloud上还有很多有趣的应用，也有些纯粹的展示行网页，<a href="http://love.leanapp.cn/" target="_blank" rel="external">love</a> 就是我无意间找到的一个，我这个单身狗受到了成吨的伤害。</p>
<p>我这里只要使用leancloud建造基于web的app,设想是用leancloud提供的Nosql数据库和方便的rest API搭建一个仿掘金的网站。</p>
<p><a href="https://leancloud.cn/docs/sdk_setup-js.html" target="_blank" rel="external">leancloud</a>的文档写的非常齐全，我这里也就跳过最基本的步骤，leancloud支持直接部署里github上的代码，这一点非常棒。在<code>云引擎/部署</code>中可以进行操作，先从<code>云引擎/设置中找到Deploy Key</code>将其放到github项目setting中的Deploy Key中即可。</p>
<p>部署后在设置一下我们项目的二级域名，就可以访问了。</p>
<p>现在我还刚开始接触，之后会慢慢把项目搞起来，加油！</p>
]]></content>
<summary type="html">
<p>今天按照<a href="https://leancloud.cn/docs/sdk_setup-js.html" target="_blank" rel="external">leancloud</a>的文档搭建了一个简单的todo应用，主要是体验一下他们的后端API，使
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="leancloud" scheme="http://zhangzirui.com/tags/leancloud/"/>
<category term="restful" scheme="http://zhangzirui.com/tags/restful/"/>
</entry>
<entry>
<title>使用fexo主题并添加分页</title>
<link href="http://zhangzirui.com/2016/08/31/2016/08/fexo-theme/"/>
<id>http://zhangzirui.com/2016/08/31/2016/08/fexo-theme/</id>
<published>2016-08-31T15:14:54.000Z</published>
<updated>2016-09-01T15:11:08.000Z</updated>
<content type="html"><![CDATA[<p>基于Hexo的博客已经发布到github上，并使用了自己的域名<a href="http://www.zhangzirui.com/" target="_blank" rel="external">zhangzirui.com</a>,于是我又陷入了当时用jekyll搭博客后的同一个烦恼–选<code>主题</code>。</p>
<p>当时的jekyll用的是<a href="https://github.com/Gaohaoyang" target="_blank" rel="external">Gaohaoyang</a>创作的<a href="https://github.com/Gaohaoyang/gaohaoyang.github.io" target="_blank" rel="external">主题</a>当时找了好久才确定。现在用了Hexo却很快找到了想要的主题<a href="https://github.com/forsigner/fexo" target="_blank" rel="external">fexo</a>。</p>
<p>直接下载到theme目录下，然后在配置文件中写下<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"># Extensions</div><div class="line">## Plugins: https://hexo.io/plugins/</div><div class="line">## Themes: https://hexo.io/themes/</div><div class="line">theme: fexo</div></pre></td></tr></table></figure></p>
<p>再次运行Hexo博客<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo server</div></pre></td></tr></table></figure></p>
<p>发现博客已经改天换地一般。<br>然而看了一会却发现，文章内部没有加上分页，于是决定自己写一个。<br>在theme的layout文件夹的_partial/component内创建pagination.ejs,</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><% <span class="keyword">if</span> (page.prev || page.next){ %></div><div class="line"></div><div class="line"> <div class="post__pagination"></div><div class="line"> <nav class="post__nav"></div><div class="line"> <div class="post__prev tl"></div><div class="line"> <% if (page.prev){ %></div><div class="line"> <a href="<%- config.root %><%- page.prev.path %>" title="<%= page.prev.title %>"></div><div class="line"> <strong>上一篇:</strong></div><div class="line"> <span></div><div class="line"> <% if (page.prev.title){ %><%= page.prev.title %><% } else { %>(no title)<% } %></span></div><div class="line"> </a></div><div class="line"> <% } else {%></div><div class="line"> <a href="<%- config.root %><%- page.next.path %>" title="<%= page.next.title %>"></div><div class="line"> <strong>第一篇:</strong>点击到下一篇</div><div class="line"> </a></div><div class="line"> <%}%></div><div class="line"> </div></div><div class="line"></div><div class="line"> <div class="post__home tc"></div><div class="line"> <a href="/archives"></div><div class="line"> <strong>目录</strong></div><div class="line"> </a></div><div class="line"> </div></div><div class="line"></div><div class="line"> <div class="pot__next tl"></div><div class="line"> <% if (page.next){ %></div><div class="line"> <a href="<%- config.root %><%- page.next.path %>" title="<%= page.next.title %>"></div><div class="line"> <strong>下一篇:</strong></div><div class="line"> <span><% if (page.next.title){ %><%= page.next.title %><% } else { %>(no title)<% } %></div><div class="line"> </span></div><div class="line"> </a></div><div class="line"> <%} else {%></div><div class="line"> <a href="/archives"></div><div class="line"> <strong>最后一篇:</strong>点击返回目录</div><div class="line"> </div><div class="line"> </a></div><div class="line"> <% }%></div><div class="line"> </div></div><div class="line"> </nav></div><div class="line"> </div></div><div class="line"><% } %></div></pre></td></tr></table></figure>
<p>之后在post.ejs中加上</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><%- partial(<span class="string">'_partial/component/paginationPost'</span>) %></div></pre></td></tr></table></figure>
<p>即可。</p>
<p>Hexo中创建分页还是很方便的，直接调用他封装好的函数就行。</p>
]]></content>
<summary type="html">
<p>基于Hexo的博客已经发布到github上，并使用了自己的域名<a href="http://www.zhangzirui.com/" target="_blank" rel="external">zhangzirui.com</a>,于是我又陷入了当时用jekyll搭博客
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="Hexo" scheme="http://zhangzirui.com/tags/Hexo/"/>
<category term="blog" scheme="http://zhangzirui.com/tags/blog/"/>
<category term="theme" scheme="http://zhangzirui.com/tags/theme/"/>
</entry>
<entry>
<title>使用Hexo搭建自己的博客</title>
<link href="http://zhangzirui.com/2016/08/31/2016/08/hexo-blog/"/>
<id>http://zhangzirui.com/2016/08/31/2016/08/hexo-blog/</id>
<published>2016-08-31T13:14:54.000Z</published>
<updated>2016-08-31T13:19:18.000Z</updated>
<content type="html"><![CDATA[<h2 id="为何放弃jekyll选择Hexo"><a href="#为何放弃jekyll选择Hexo" class="headerlink" title="为何放弃jekyll选择Hexo"></a>为何放弃jekyll选择Hexo</h2><blockquote>
<p>A fast, simple & powerful blog framework —— <a href="https://hexo.io/" target="_blank" rel="external">Hexo官网</a></p>
</blockquote>
<p>之前的博客用jekyll做的博客,也写过一篇搭建<code>jekyll</code>博客的文章<a href="http://www.zhangzirui.com/2015/09/12/create-my-blog-with-jekyll1/" target="_blank" rel="external">Jekyll 搭建静态博客</a>。好久没更新了，现在因为一些原因闲了下来，决定把博客好好写写，所谓破而后立，工作接触最多的是<code>Node</code>，也早就听说了<code>Hexo</code>的大名，所以重新用<code>Hexo</code>把整个博客重新搭了一遍。 </p>
<h2 id="简单的命令"><a href="#简单的命令" class="headerlink" title="简单的命令"></a>简单的命令</h2><p><code>Hexo</code>的命令很简单，就像其他基于node的项目一样，小而美。</p>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>首先安装<a href="https://nodejs.org/en/" target="_blank" rel="external">Node.js</a>, <a href="https://git-scm.com/" target="_blank" rel="external">Git</a> 这两项必须的依赖，我的电脑里早就有的，pass。<br>然后使用npm安装hexo-cli <code>Hexo</code> 的脚手架。</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install -g hexo-cli</div></pre></td></tr></table></figure>
<h3 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h3><p>具体介绍看<a href="https://hexo.io/docs/" target="_blank" rel="external">这里</a><br>安装好后就可以先简单搭个Demo实验一下了<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo init <folder></div><div class="line">$ cd <folder></div><div class="line">$ npm install</div></pre></td></tr></table></figure></p>
<p>安好后的目录是这样的结构</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">├── _config.yml</div><div class="line">├── package.json</div><div class="line">├── scaffolds</div><div class="line">├── source</div><div class="line">| ├── _drafts</div><div class="line">| └── _posts</div><div class="line">└── themes</div></pre></td></tr></table></figure>
<p>package.js中内容如下</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">package.json</div><div class="line">{</div><div class="line"> <span class="string">"name"</span>: <span class="string">"hexo-site"</span>,</div><div class="line"> <span class="string">"version"</span>: <span class="string">"0.0.0"</span>,</div><div class="line"> <span class="string">"private"</span>: true,</div><div class="line"> <span class="string">"hexo"</span>: {</div><div class="line"> <span class="string">"version"</span>: <span class="string">""</span></div><div class="line"> },</div><div class="line"> <span class="string">"dependencies"</span>: {</div><div class="line"> <span class="string">"hexo"</span>: <span class="string">"^3.0.0"</span>,</div><div class="line"> <span class="string">"hexo-generator-archive"</span>: <span class="string">"^0.1.0"</span>,</div><div class="line"> <span class="string">"hexo-generator-category"</span>: <span class="string">"^0.1.0"</span>,</div><div class="line"> <span class="string">"hexo-generator-index"</span>: <span class="string">"^0.1.0"</span>,</div><div class="line"> <span class="string">"hexo-generator-tag"</span>: <span class="string">"^0.1.0"</span>,</div><div class="line"> <span class="string">"hexo-renderer-ejs"</span>: <span class="string">"^0.1.0"</span>,</div><div class="line"> <span class="string">"hexo-renderer-stylus"</span>: <span class="string">"^0.2.0"</span>,</div><div class="line"> <span class="string">"hexo-renderer-marked"</span>: <span class="string">"^0.2.4"</span>,</div><div class="line"> <span class="string">"hexo-server"</span>: <span class="string">"^0.1.2"</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="本地运行"><a href="#本地运行" class="headerlink" title="本地运行"></a>本地运行</h3><p>这个时候我们可以运行<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo server</div></pre></td></tr></table></figure></p>
<p>然后使用浏览器访问<code>localhost:4000</code>就能看到我们的博客主页了，默认的是<code>landspace</code>主题。</p>
<p>创建新文章可以运行<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new [layout] <title></div></pre></td></tr></table></figure></p>
<p>生成静态页面，运行<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure></p>
<p>清除缓存文件(db.json)和生成的文件(public)可以使用<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo clean</div></pre></td></tr></table></figure></p>
<h3 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</h3><p>最后我们可以发布了，发布前要做些准备工作，在根目录下的_config.yml中配置做如下配置</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment"># Deployment</span></div><div class="line"><span class="comment">## Docs: http://hexo.io/docs/deployment.html</span></div><div class="line">deploy:</div><div class="line"> type: git</div><div class="line"> repository: git@github.com:ZZR-china/zzr-china.github.com.git</div><div class="line"> branch: master</div></pre></td></tr></table></figure>
<p>并运行<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-deployer-git -save</div></pre></td></tr></table></figure></p>
<p>然后就可以开心的发布了！</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo deploy -g <span class="comment">##发布前生成静态目录</span></div></pre></td></tr></table></figure>
<p>现在访问zzr-china.github.com就能看到我们的demo。</p>
]]></content>
<summary type="html">
<h2 id="为何放弃jekyll选择Hexo"><a href="#为何放弃jekyll选择Hexo" class="headerlink" title="为何放弃jekyll选择Hexo"></a>为何放弃jekyll选择Hexo</h2><blockquote>
<p>A
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="Hexo" scheme="http://zhangzirui.com/tags/Hexo/"/>
<category term="blog" scheme="http://zhangzirui.com/tags/blog/"/>
</entry>
<entry>
<title>三栏式布局学习总结</title>
<link href="http://zhangzirui.com/2016/03/15/2016/03/css-three-layout-task3/"/>
<id>http://zhangzirui.com/2016/03/15/2016/03/css-three-layout-task3/</id>
<published>2016-03-14T16:00:00.000Z</published>
<updated>2016-08-31T01:28:52.000Z</updated>
<content type="html"><![CDATA[<h2 id="三栏式布局"><a href="#三栏式布局" class="headerlink" title="三栏式布局"></a>三栏式布局</h2><p>task3是完成一个三栏式布局，我本来以为很简单的实现，但是真正做下来发现还是有些地方需要注。<br>布局是前端工程师的基本功，这次的任务让我意识到我的基本功还有待提高。</p>
<p>这里是我做好的<a href="https://github.com/npm-team/step1/tree/gh-pages/task0003" target="_blank" rel="external">源码地址</a>和<a href="http://npm-team.github.io/step1/task0003/task0003.html" target="_blank" rel="external">demo地址</a></p>
<h2 id="CSS布局–圣杯布局-amp-amp-双飞翼布局"><a href="#CSS布局–圣杯布局-amp-amp-双飞翼布局" class="headerlink" title="CSS布局–圣杯布局&&双飞翼布局"></a>CSS布局–圣杯布局&&双飞翼布局</h2><p> 圣杯布局跟双飞翼布局目的都是左右两栏固定宽度，中间部分自适应。但是还是有些区别</p>
<h3 id="【圣杯布局】"><a href="#【圣杯布局】" class="headerlink" title="【圣杯布局】"></a>【圣杯布局】</h3><p> <img src="http://7xrwum.com1.z0.glb.clouddn.com/shengbei.png" alt=""></p>
<p>在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。</p>
<p>html代码中 middle部分首先要放在container的最前部分。然后是left,right</p>
<p>1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）</p>
<p>2.middle部分 width:100%占满</p>
<p>3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%</p>
<p>4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上<br>padding:0 220px 0 200px</p>
<p>5.middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px</p>
<p>6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px<br>不过衰衰地发现ie中有问题.. ie6/7/8/9中 下面的空白高度都不一样..</p>
<p>当然，为了保证窗口不能缩太小无法展示左右，可以给body加上 min-width</p>
<h3 id="【双飞翼布局】"><a href="#【双飞翼布局】" class="headerlink" title="【双飞翼布局】"></a>【双飞翼布局】</h3><p>听说双飞翼布局是玉伯大大提出来的，始于淘宝UED<br>如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.<br>其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧）<br>恩，这里有一只鸟~<br>左翅sub有200px,右翅extra..220px.. 身体main自适应未知</p>
<p>1.html代码中，main要放最前边，sub extra</p>
<p>2.将main sub extra 都float:left</p>
<p>3.将main占满 width:100%</p>
<p>4.此时main占满了，所以要把sub拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-220px<br>（这时可以直接继续上边圣杯布局的步骤，也可以有所改动）</p>
<p>5.main内容被覆盖了吧，除了使用外围的padding，还可以考虑使用margin。<br>给main增加一个内层div– main-inner, 然后margin:0 220px 0 200px</p>
<p>6.main正确展示</p>
]]></content>
<summary type="html">
<h2 id="三栏式布局"><a href="#三栏式布局" class="headerlink" title="三栏式布局"></a>三栏式布局</h2><p>task3是完成一个三栏式布局，我本来以为很简单的实现，但是真正做下来发现还是有些地方需要注。<br>布局是前端工程
</summary>
<category term="前端" scheme="http://zhangzirui.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="css" scheme="http://zhangzirui.com/tags/css/"/>
<category term="三栏布局" scheme="http://zhangzirui.com/tags/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80/"/>
</entry>
</feed>