-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1118 lines (712 loc) · 104 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="https://guohui8.github.io">
<title>Guohui的博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="程序媛鼓励师、精神慈善家、装逼爱好者。">
<meta property="og:type" content="website">
<meta property="og:title" content="Guohui的博客">
<meta property="og:url" content="https://guohui8.github.io/index.html">
<meta property="og:site_name" content="Guohui的博客">
<meta property="og:description" content="程序媛鼓励师、精神慈善家、装逼爱好者。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Guohui的博客">
<meta name="twitter:description" content="程序媛鼓励师、精神慈善家、装逼爱好者。">
<link rel="alternative" href="/atom.xml" title="Guohui的博客" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" type="text/css" href="/./main.234bc0.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
</head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #0DC7F5"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/img/a.png" class="js-avatar show" style="width: 100%;height: 100%;opacity: 1;">
</a>
<hgroup>
<h1 class="header-author"><a href="/">Guohui</a></h1>
</hgroup>
<p class="header-subtitle">随心而动 随刃而行</p>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/tags/技术/">技术</a></li>
<li><a href="/tags/随笔/">随笔</a></li>
<li><a href="/tags/相册/">相册</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/guohui8" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="http://www.weibo.com/p/1005052938547113" title="weibo"><i class="icon-weibo"></i></a>
<a class="qq" target="_blank" href="http://sighttp.qq.com/msgrd?v=1&uin=1207509097" title="qq"><i class="icon-qq"></i></a>
<a class="weixin" target="_blank" href="#" title="weixin"><i class="icon-weixin"></i></a>
<a class="mail" target="_blank" href="mailto:1207509097@qq.com" title="mail"><i class="icon-mail"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #0DC7F5"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/img/a.png" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">Guohui</h1>
</hgroup>
<p class="header-subtitle"><i class="icon icon-quo-left"></i>随心而动 随刃而行<i class="icon icon-quo-right"></i></p>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/guohui8" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="http://www.weibo.com/p/1005052938547113" title="weibo"><i class="icon-weibo"></i></a>
<a class="qq" target="_blank" href="http://sighttp.qq.com/msgrd?v=1&uin=1207509097" title="qq"><i class="icon-qq"></i></a>
<a class="weixin" target="_blank" href="#" title="weixin"><i class="icon-weixin"></i></a>
<a class="mail" target="_blank" href="mailto:1207509097@qq.com" title="mail"><i class="icon-mail"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 70%">
<li style="width: 25%"><a href="/">主页</a></li>
<li style="width: 25%"><a href="/tags/技术/">技术</a></li>
<li style="width: 25%"><a href="/tags/随笔/">随笔</a></li>
<li style="width: 25%"><a href="/tags/相册/">相册</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-博客改为使用Vuepress" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/01/05/博客改为使用Vuepress/">博客转移Vuepress</a>
</h1>
<a href="/2020/01/05/博客改为使用Vuepress/" class="archive-article-date">
<time datetime="2020-01-05T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-01-05</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 这个博客运行大概有4年了吧，但其实自己也没怎么认真去打理，可能是因为没有什么访问量吧，目前发现很多文档其实都用了Vuepress，自己也打算练练手，着手换到Vuepress上。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">随笔</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/01/05/博客改为使用Vuepress/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-es6模块与 commonJS规范的区别" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/01/es6模块与 commonJS规范的区别/">es6模块与 commonJS规范的区别</a>
</h1>
<a href="/2017/10/01/es6模块与 commonJS规范的区别/" class="archive-article-date">
<time datetime="2017-10-01T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-10-01</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>es6 {</p>
<p> export : ‘可以输出多个，输出方式为 {}’ ，</p>
<p> export default : ‘ 只能输出一个 ，可以与export 同时输出，但是不建议这么做’，</p>
<p> 解析阶段确定对外输出的接口，解析阶段生成接口，</p>
<p> 模块不是对象，加载的不是对象，</p>
<p> 可以单独加载其中的某个接口（方法），</p>
<p> 静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变，</p>
<p> this 指向undefined</p>
<p>}</p>
<p>commonJS {</p>
<p> module.exports = … : ‘只能输出一个，且后面的会覆盖上面的’ ，</p>
<p> exports. … : ‘ 可以输出多个’，</p>
<p> 运行阶段确定接口，运行时才会加载模块，</p>
<p> 模块是对象，加载的是该对象，</p>
<p> 加载的是整个模块，即将所有的接口全部加载进来，</p>
<p> 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，</p>
<p> this 指向当前模块</p>
<p>}</p>
</blockquote>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">技术</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/10/01/es6模块与 commonJS规范的区别/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-vuex学习实践笔记" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/06/19/vuex学习实践笔记/">vuex学习实践笔记</a>
</h1>
<a href="/2017/06/19/vuex学习实践笔记/" class="archive-article-date">
<time datetime="2017-06-19T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-06-19</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="Vuex是什么？"><a href="#Vuex是什么？" class="headerlink" title="Vuex是什么？"></a><strong>Vuex是什么？</strong></h3><blockquote>
<p>Vuex 是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
</blockquote>
<p>栗如(travel store)：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div></pre></td><td class="code"><pre><div class="line">import * as types from '../types'</div><div class="line">//数据</div><div class="line">const state = {</div><div class="line"> travelsList: [],</div><div class="line"> searchKey: {</div><div class="line"> page: 0,</div><div class="line"> limit: 20</div><div class="line"> },</div><div class="line"> scroll: true</div><div class="line">}</div><div class="line">//用户行为(可以处理异步),触发 mutations 来改变 state</div><div class="line">const actions = {</div><div class="line"> /**</div><div class="line"> * 获取约跑步列表</div><div class="line"> */</div><div class="line"> getTravelsList({ commit }) {</div><div class="line"> if(state.scroll) {</div><div class="line"> commit(types.GET_TRAVELS_PAGE_NUM)</div><div class="line"> commit(types.COM_LOADING_STATUS, true),</div><div class="line"> commit(types.GET_TRAVELS_SCORLL_STATUS, false)</div><div class="line"> api.TravelsList()</div><div class="line"> .then(res => {</div><div class="line"> console.log(res)</div><div class="line"> commit(types.COM_LOADING_STATUS, false),</div><div class="line"> commit(types.GET_TRAVELS_SCORLL_STATUS, true)</div><div class="line"> commit(types.GET_TRAVELS_LIST, res)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> },</div><div class="line"> /**</div><div class="line"> * 参加</div><div class="line"> */</div><div class="line"> joinTravel({ commit }, id) {</div><div class="line"> ...</div><div class="line"> }</div><div class="line">}</div><div class="line">//可以过滤 state 中的数据</div><div class="line">const getters = {</div><div class="line"> travelsList: state => state.travelsList,</div><div class="line"> travelListIndex: state => state.travelsList.slice(0,4)</div><div class="line">}</div><div class="line">//唯一能改变 state 的方法(纯函数)</div><div class="line">const mutations = {</div><div class="line"> [types.GET_TRAVELS_LIST](state, res) {</div><div class="line"> if(state.searchKey.page <= 1) {</div><div class="line"> state.travelsList = res.data</div><div class="line"> } else {</div><div class="line"> state.travelsList = state.travelsList.concat(res.data)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> [types.GET_TRAVELS_SEARCH_KEY](state, params) {</div><div class="line"> state.searchKey = params</div><div class="line"> },</div><div class="line"> [types.GET_TRAVELS_PAGE_NUM](state) {</div><div class="line"> state.searchKey['page'] += 1</div><div class="line"> },</div><div class="line"> [types.GET_TRAVELS_SCORLL_STATUS](state, status) {</div><div class="line"> state.scroll = status</div><div class="line"> }</div><div class="line">}</div><div class="line">//导出一个 travel store 模块</div><div class="line">export default {</div><div class="line"> state,</div><div class="line"> actions,</div><div class="line"> getters,</div><div class="line"> mutations</div><div class="line">}</div></pre></td></tr></table></figure>
<p>每一个 Vuex 应用的核心就是 store（仓库）。”store” 基本上就是一个容器，它包含着你的应用中大部分的状态(state)数据。</p>
<blockquote>
<ul>
<li>Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</li>
<li>你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。</li>
</ul>
</blockquote>
<p>用一张图来理解一下<br><img src="http://omt3u4bph.bkt.clouddn.com/vuex2.jpg" alt="vuex"></p>
<blockquote>
<p>客户端(Client) -> action -> mutations -> state -> 客户端</p>
</blockquote>
<p>可以看出在vuex中数据是单一流向的：视图(view)触发action，action提交(commit)到mutations，mutations改变state(数据)，state的改变，相应的组件也会相应的更新。</p>
<h3 id="1-State"><a href="#1-State" class="headerlink" title="1.State"></a><strong>1.State</strong></h3><blockquote>
<p>单一状态树，唯一数据源，能够直接清晰的读懂数据的结构。</p>
</blockquote>
<h4 id="1-1在-Vue-组件中获得数据"><a href="#1-1在-Vue-组件中获得数据" class="headerlink" title="1.1在 Vue 组件中获得数据"></a>1.1在 Vue 组件中获得数据</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">//store</div><div class="line">const state = {</div><div class="line"> travelsList: [],</div><div class="line"> searchKey: {</div><div class="line"> page: 0,</div><div class="line"> limit: 20</div><div class="line"> },</div><div class="line"> scroll: true</div><div class="line">}</div><div class="line">//在view中直接获取</div><div class="line">data () { </div><div class="line"> return {</div><div class="line"> scroll: this.$store.state.scroll</div><div class="line"> }</div><div class="line">},</div></pre></td></tr></table></figure>
<h4 id="1-2mapState-辅助函数"><a href="#1-2mapState-辅助函数" class="headerlink" title="1.2mapState 辅助函数"></a>1.2mapState 辅助函数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">computed: mapState([</div><div class="line"> // 映射 this.scroll 为 this.$store.state.scroll</div><div class="line"> 'scroll'</div><div class="line">])</div><div class="line">//或对象展开运算符</div><div class="line">computed: {</div><div class="line"> ...mapState({</div><div class="line"> 'scroll'</div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="2-Getters"><a href="#2-Getters" class="headerlink" title="2.Getters"></a><strong>2.Getters</strong></h3><blockquote>
<p>对state数据进行过滤或直接返回</p>
</blockquote>
<h4 id="2-1在-Vue-组件中获得Getters数据"><a href="#2-1在-Vue-组件中获得Getters数据" class="headerlink" title="2.1在 Vue 组件中获得Getters数据"></a>2.1在 Vue 组件中获得Getters数据</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">//store</div><div class="line">const getters = {</div><div class="line"> travelsList: state => state.travelsList,</div><div class="line"> travelListIndex: state => state.travelsList.slice(0,4)</div><div class="line">}</div><div class="line">//在view中直接获取</div><div class="line">data () { </div><div class="line"> return {</div><div class="line"> travelListIndex: this.$store.getters.travelListIndex</div><div class="line"> }</div><div class="line">},</div></pre></td></tr></table></figure>
<h4 id="2-2mapGetters-辅助函数"><a href="#2-2mapGetters-辅助函数" class="headerlink" title="2.2mapGetters 辅助函数"></a>2.2mapGetters 辅助函数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">computed: mapGetters([</div><div class="line"> // 映射 this.travelListIndex 为 this.$store.state.travelListIndex</div><div class="line"> 'travelListIndex'</div><div class="line">])</div><div class="line">//或对象展开运算符</div><div class="line">computed: {</div><div class="line"> ...mapGetters({</div><div class="line"> 'travelListIndex'</div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="3-Mutations"><a href="#3-Mutations" class="headerlink" title="3.Mutations"></a><strong>3.Mutations</strong></h3><blockquote>
<p>要更改 Vuex 的 store 中的数据，唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行数据更改的地方。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">const mutations = {</div><div class="line"> //使用常量替代 Mutation 事件类型</div><div class="line"> [types.GET_TRAVELS_LIST](state, res) {</div><div class="line"> if(state.searchKey.page <= 1) {</div><div class="line"> state.travelsList = res.data</div><div class="line"> } else {</div><div class="line"> state.travelsList = state.travelsList.concat(res.data)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> ...</div><div class="line">}</div></pre></td></tr></table></figure>
<blockquote>
<p>当我们在这改变数据时，其它引用此state数据的 Vue 组件也会自动得到更新。</p>
</blockquote>
<h3 id="4-Actions"><a href="#4-Actions" class="headerlink" title="4.Actions"></a><strong>4.Actions</strong></h3><blockquote>
<p>用户的一些行为，来提交到mutations改变数据。可在这进行异步操作。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">const actions = {</div><div class="line"> //es6的参数解构</div><div class="line"> getTravelsList({ commit }) {</div><div class="line"> if(state.scroll) {</div><div class="line"> commit(types.GET_TRAVELS_PAGE_NUM)</div><div class="line"> commit(types.COM_LOADING_STATUS, true),</div><div class="line"> commit(types.GET_TRAVELS_SCORLL_STATUS, false)</div><div class="line"> api.TravelsList()</div><div class="line"> .then(res => {</div><div class="line"> console.log(res)</div><div class="line"> commit(types.COM_LOADING_STATUS, false),</div><div class="line"> commit(types.GET_TRAVELS_SCORLL_STATUS, true)</div><div class="line"> commit(types.GET_TRAVELS_LIST, res)</div><div class="line"> })</div><div class="line"> }</div><div class="line"> },</div><div class="line"> joinTravel({ commit }, id) {</div><div class="line"> ...</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<h4 id="4-1分发-Action"><a href="#4-1分发-Action" class="headerlink" title="4.1分发 Action"></a>4.1分发 Action</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">created() {</div><div class="line"> if (this.travelListIndex.length == 0) {</div><div class="line"> this.$store.dispatch('getTravelsList')</div><div class="line"> }</div><div class="line">},</div></pre></td></tr></table></figure>
<h4 id="4-2mapActions-辅助函数"><a href="#4-2mapActions-辅助函数" class="headerlink" title="4.2mapActions 辅助函数"></a>4.2mapActions 辅助函数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">methods: {</div><div class="line"> ...mapActions([</div><div class="line"> 'getTravelsList' // 映射 this.getTravelsList() 为 this.$store.dispatch('getTravelsList')</div><div class="line"> ]),</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="5-Modules"><a href="#5-Modules" class="headerlink" title="5.Modules"></a><strong>5.Modules</strong></h3><blockquote>
<p>当应用变得很大时，store 对象会变得臃肿不堪。为了解决这个问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">const moduleA = {</div><div class="line"> state: { ... },</div><div class="line"> mutations: { ... },</div><div class="line"> actions: { ... },</div><div class="line"> getters: { ... }</div><div class="line">}</div><div class="line">const moduleB = {</div><div class="line"> state: { ... },</div><div class="line"> mutations: { ... },</div><div class="line"> actions: { ... }</div><div class="line">}</div><div class="line">const store = new Vuex.Store({</div><div class="line"> modules: {</div><div class="line"> a: moduleA,</div><div class="line"> b: moduleB</div><div class="line"> }</div><div class="line">})</div><div class="line">store.state.a // -> moduleA 的状态</div><div class="line">store.state.b // -> moduleB 的状态</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">技术</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/06/19/vuex学习实践笔记/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-跟大师学摄影" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/05/02/跟大师学摄影/">跟大师学摄影</a>
</h1>
<a href="/2017/05/02/跟大师学摄影/" class="archive-article-date">
<time datetime="2017-05-02T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-05-02</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/020.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/021.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/022.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/023.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/024.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/025.jpg" alt=""></p>
<p><img src="https://raw.githubusercontent.com/guohui8/OnlineAlbum/master/blogImage/026.jpg" alt=""></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">相册</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/05/02/跟大师学摄影/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-时光里，我们都是赶路人" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/04/03/时光里，我们都是赶路人/">时光里，我们都是赶路人</a>
</h1>
<a href="/2017/04/03/时光里，我们都是赶路人/" class="archive-article-date">
<time datetime="2017-04-03T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-04-03</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 慢慢觉着时光开始沉淀了，如一抹繁华的艳阳，从夏日旁晚清凉的池塘中滑落，悄然走进了秋日的诗行。彼处，依旧是微风不燥，岁月静好。万里黄沙之上，依旧有人沉腕拨镫，疾书一行字：“相忘于江湖”。其实在光阴里，我们都是赶路人，终归有一天日子将会过得如烟火湮灭那般平静且丰盈。正如微风，拂过草地上的清露，在林间流动之际，那些路边的小花儿开也不再张扬。</p>
<p> 素白的光阴里，短暂的相遇邂逅，我们转身便策马扬鞭，奔向远方。而在时光荏苒里随心事渐渐寂寞的日子里，谁又繁华了悲伤，疼痛了幸福。最后，又是谁背负着沉重的枷锁，固守仅存的坚持，明知无望却忍着寂寥划过了逆流的哀痛，终于嗅到了春。</p>
<p> 曾经，我们都不停奔赴着自己最美的风景，却一直在放弃。暮然回首之际，夜幕却依旧如期降临，举目四望，偌大的桌边只我一人，空对，一盏冰冷的茶。才明白那些曾相伴走过一遭的人，那些当初索然无味的问候，那些毫无方向的旅途，那些种种过往的云烟，原来才是这世间的所有懂得的馈赠，也许只有光阴知道，桃之夭夭灼灼其华的默契，日久弥深，却又宛如初见，忽尔盛开，。</p>
<p> 每每念起沈园遗梦，心中倍感凄凉。时常做想悠游放荡如陆游在遇上唐婉那一刹间，眼帘中饱含是情、是怨、是思、还是怜。如若是我，定会上前一步，浅浅微笑，谢谢你给了我这一段清浅的韶光，愿你别空负了我的流年。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">随笔</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/04/03/时光里，我们都是赶路人/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-webpack工程化" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/26/webpack工程化/">webpack工程化</a>
</h1>
<a href="/2017/03/26/webpack工程化/" class="archive-article-date">
<time datetime="2017-03-26T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-03-26</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="一、webpack是什么"><a href="#一、webpack是什么" class="headerlink" title="一、webpack是什么"></a>一、webpack是什么</h3><blockquote>
<p>webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules</p>
</blockquote>
<p>webpack 是一个模块打包工具，输入为包含依赖关系的模块集，输出为打包合并的前端静态资源。在上一节的前端工程化中，已经介绍过，webpack 是同时支持 AMD 和 CommonJs 的模块定义方式，不仅如此，webpack 可以将任何前端资源视为模块，如 css，图片，文本。</p>
<h3 id="二、为什么要使用它"><a href="#二、为什么要使用它" class="headerlink" title="二、为什么要使用它"></a>二、为什么要使用它</h3><p>在 webpack 出现之前，已经有了一些打包工具，如 Browserify、grunt、gulp… 这些打包工具工具功能单一，只能完成特定的任务，然而 web 前端工程是复杂的，一个 webapp 对于业务代码的要求可能有：</p>
<blockquote>
<ul>
<li>代码可以分块，实现按需加载</li>
<li>首屏加载时间要尽量减少</li>
<li>需要集成一些第三方库</li>
</ul>
</blockquote>
<p>webpack 的出现正式为了解决这些问题，在 webpack 中，提供了一下这些功能：</p>
<p><strong>1.代码分块：</strong> webpack 有两种类型的模块依赖，一种是同步的，一种是异步的。在打包的过程中可以将代码输出为代码块（chunk），代码块可以实现按需加载。 异步加载的代码块通过分割点（spliting point）来确定。<br><strong>2.Loaders：</strong> Webpack 本身只会处理 Javascript，为了实现将其他资源也定义为模块，并转化为 Javascript， Webpack 定义 loaders , 不同的 loader 可以将对应的资源转化为 Javascript 模块。<br><strong>3.智能的模块解析：</strong> webpack 可以很容易将第三方库转化为模块集成到项目代码中，模块的依赖可以用表达式的方式（这在其他打包工具中是没有支持的），这种模块依赖叫做动态模块依赖。<br><strong>4.插件系统：</strong> webpack 的可定制化在于其插件系统，其本身的很多功能也是通过插件的方式实现，插件系统形成了 webpack 的生态，是的可以使用很多开源的第三方插件。</p>
<h3 id="三、webpack-核心思想"><a href="#三、webpack-核心思想" class="headerlink" title="三、webpack 核心思想"></a>三、webpack 核心思想</h3><p><strong>1.万物皆模块：</strong> 在 webpack 的世界中，除了 Javascript，其他任何资源都可以当做模块的方式引用。<br><strong>2.按需加载：</strong> webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是毕需，这也是 webpack 出现的根本原因。<br><strong>3.可定制化：</strong> 任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack 基于可定制化的理念构建，通过插件系统，配置文件，可以实现大型项目的定制需求。</p>
<h3 id="四、安装配置"><a href="#四、安装配置" class="headerlink" title="四、安装配置"></a>四、安装配置</h3><p>在此之前你应该已经安装了 node.js.</p>
<p>全局安装webapck或webpack-dev-server(开启一个本地服务)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ npm install webpack -g</div><div class="line">$ npm install webpack-dev-server -g</div></pre></td></tr></table></figure>
<p>在项目中安装webpack和webpack-dev-server</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ npm install webpack --save-dev</div><div class="line">$ npm install webpack-dev-server --save-dev</div></pre></td></tr></table></figure>
<p><strong>webpack使用</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">//name.js</div><div class="line">let name = 'hzzly'</div><div class="line">export default name</div><div class="line"></div><div class="line">//index.js</div><div class="line">import name from './name'</div><div class="line">document.getElementById('app').textContent = `hello~${name}`</div></pre></td></tr></table></figure>
<p>1.命令行的使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ webpack src/index.js dist/bundle.js</div></pre></td></tr></table></figure>
<blockquote>
<p>语法：webpack 要打包的文件 打包输出的文件</p>
</blockquote>
<p>2.配置文件的使用<br>在项目目录下创建 webpack.config.js如下(简单的配置)：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line">var webpack = require('webpack')</div><div class="line">module.exports = {</div><div class="line"> entry: './src/index.js', //入口</div><div class="line"> output: {</div><div class="line"> path: './dist/', //输出路径</div><div class="line"> filename: 'bundle.js' //输出文件名</div><div class="line"> },</div><div class="line"> module: {</div><div class="line"> loaders: [</div><div class="line"> {</div><div class="line"> test: /\.js[x]?$/,</div><div class="line"> exclude: /node_modules/,</div><div class="line"> loader: 'babel-loader', //处理.js或.jsx文件loader</div><div class="line"> query: {</div><div class="line"> presets: ['env']</div><div class="line"> }</div><div class="line"> },</div><div class="line"> {</div><div class="line"> test: /\.css$/,</div><div class="line"> loader: "style-loader!css-loader" //处理.css文件loader</div><div class="line"> },</div><div class="line"> {</div><div class="line"> test: /\.(png|jpg)$/,</div><div class="line"> loader: 'url-loader?limit=8192' //处理图片loader</div><div class="line"> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>执行：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ webpack</div><div class="line">//或开启本地服务器并实时监听文件变化</div><div class="line">$ webpack-dev-server --inline --colors --hot</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">技术</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/03/26/webpack工程化/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-Promise的那些事" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/15/Promise的那些事/">Promise的那些事</a>
</h1>
<a href="/2017/03/15/Promise的那些事/" class="archive-article-date">
<time datetime="2017-03-15T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-03-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="说说promise"><a href="#说说promise" class="headerlink" title="说说promise"></a>说说promise</h1><blockquote>
<p>Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。</p>
</blockquote>
<p>所谓Promise，简单说就是一个容器(对象)，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。</p>
<p>接触过promise的的都知道它的应用场景和用途，Promise可以用来避免异步操作函数里的嵌套回调（callback hell）问题，因为解决异步最直接的方法是回调嵌套，将后一个的操作放在前一个操作的异步回调里，但如果操作多了，就会有很多层的嵌套(<strong>回调地狱</strong>)。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$.ajax(url1, function(data1){</div><div class="line"> // do something...</div><div class="line"> $.ajax(url2, function(data2){</div><div class="line"> // do something...</div><div class="line"> $.ajax(url3, function(data3){</div><div class="line"> // do something...</div><div class="line"> done(data3); // 返回数据</div><div class="line"> })</div><div class="line"> });</div><div class="line">});</div></pre></td></tr></table></figure>
<p>Promise学术点的描述：</p>
<blockquote>
<p>promise代表一个异步操作的执行返回状态，这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。</p>
</blockquote>
<p>这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回状态的 promise 对象来替代原返回状态。</p>
<h1 id="Promise的表现"><a href="#Promise的表现" class="headerlink" title="Promise的表现"></a><strong>Promise的表现</strong></h1><p>如果使用回调方法处理多个操作的异步场景，判断某个操作成功或失败的控制在于声明的匿名函数里面，使用Promise对象则可以重新定义异步执行的状态和控制逻辑。</p>
<p>promise的最重要的特点就是它把我们处理任何函数调用的成功或者失败的方式规范成了可预测的形式，特别是如果这个调用实际上的异步的。</p>
<p>Promise中有几个状态：</p>
<blockquote>
<ul>
<li>pending: 初始状态。 非 fulfilled 或 rejected。</li>
<li>resolved: 成功的操作。也有的成为fulfilled 。</li>
<li>rejected: 失败的操作。</li>
</ul>
</blockquote>
<p>状态转换关系为：</p>
<blockquote>
<p>pending->resolved(fulfilled)，pending->rejected。</p>
</blockquote>
<p>Promise对象有以下两个特点:</p>
<blockquote>
<ul>
<li>对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）</li>
<li>一旦状态改变，就不会再变，任何时候都可以得到这个结果。</li>
</ul>
</blockquote>
<h1 id="用法"><a href="#用法" class="headerlink" title="用法"></a><strong>用法</strong></h1><p>说了这么多，直接上代码。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">var promise = new Promise((resolve, reject) => {</div><div class="line"> // do somthing, maybe async</div><div class="line"> if (success){</div><div class="line"> return resolve(res);</div><div class="line"> } else {</div><div class="line"> return reject(err);</div><div class="line"> }</div><div class="line">});</div><div class="line"> </div><div class="line">promise.then(res => {</div><div class="line"> // do something... e.g</div><div class="line"> console.log(res);</div><div class="line">}, err => {</div><div class="line"> // deal the err.</div><div class="line">})</div></pre></td></tr></table></figure>
<p><strong>或封装成方法</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">function fetch(data) {</div><div class="line"> return new Promise((resolve, reject) => {</div><div class="line"> // do somthing, maybe async</div><div class="line"> if (success){</div><div class="line"> resolve(res);</div><div class="line"> } else {</div><div class="line"> reject(err);</div><div class="line"> }</div><div class="line"> })</div><div class="line">}</div><div class="line"> </div><div class="line">fetch(data)</div><div class="line"> .then(res => {</div><div class="line"> console.log(res)</div><div class="line"> }, err => {</div><div class="line"> // deal the err.</div><div class="line"> })</div></pre></td></tr></table></figure>
<h1 id="异步嵌套回调"><a href="#异步嵌套回调" class="headerlink" title="异步嵌套回调"></a><strong>异步嵌套回调</strong></h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">function loadAsync1(){</div><div class="line"> return new Promise((resolve, reject) => {</div><div class="line"> //异步操作</div><div class="line"> setTimeout(() => {</div><div class="line"> console.log('异步任务1');</div><div class="line"> resolve('异步任务1传过来的值');</div><div class="line"> }, 2000);</div><div class="line"> }); </div><div class="line">}</div><div class="line">function loadAsync2(data1){</div><div class="line"> return new Promise((resolve, reject) => {</div><div class="line"> //异步操作</div><div class="line"> setTimeout(() => {</div><div class="line"> console.log('异步任务2');</div><div class="line"> resolve('异步任务2传过来的值');</div><div class="line"> }, 2000);</div><div class="line"> }); </div><div class="line">}</div><div class="line">function loadAsync3(data2){</div><div class="line"> return new Promise((resolve, reject) => {</div><div class="line"> //异步操作</div><div class="line"> setTimeout(() => {</div><div class="line"> console.log('异步任务3');</div><div class="line"> resolve('异步任务3传过来的值');</div><div class="line"> }, 2000);</div><div class="line"> }); </div><div class="line">}</div></pre></td></tr></table></figure>
<p>有返回值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">loadAsync1()</div><div class="line"> .then(data1 => {</div><div class="line"> return loadAsync2(data1)</div><div class="line"> })</div><div class="line"> .then(data2 => {</div><div class="line"> return loadAsync3(data2)</div><div class="line"> })</div><div class="line"> .then(okFn, failFn)</div></pre></td></tr></table></figure>
<p>没有返回值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">loadAsync1()</div><div class="line"> .then(data1 => {</div><div class="line"> loadAsync2(data1)</div><div class="line"> })</div><div class="line"> .then(data2 =>{</div><div class="line"> loadAsync3(data2)</div><div class="line"> })</div><div class="line"> .then(res => console.log(res))</div></pre></td></tr></table></figure>
<p>输出的值为：</p>
<blockquote>
<p>异步任务1<br>异步任务1传过来的值<br>异步任务2<br>异步任务2传过来的值<br>异步任务3<br>异步任务3传过来的值</p>
</blockquote>
<h1 id="promise-all方法"><a href="#promise-all方法" class="headerlink" title="promise.all方法"></a><strong>promise.all方法</strong></h1><blockquote>
<p>Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">var p1 = new Promise((resolve) => {</div><div class="line"> setTimeout(() => {</div><div class="line"> resolve("第一个promise");</div><div class="line"> }, 3000);</div><div class="line">});</div><div class="line"> </div><div class="line">var p2 = new Promise((resolve) => {</div><div class="line"> setTimeout(() => {</div><div class="line"> resolve("第二个promise");</div><div class="line"> }, 1000);</div><div class="line">});</div><div class="line"> </div><div class="line">Promise.all([p1, p2])</div><div class="line"> .then((result) => {</div><div class="line"> console.log(result); // ["第一个promise", "第二个promise"]</div><div class="line"> });</div></pre></td></tr></table></figure>
<p>上面的代码中，all接收一个数组作为参数，p1,p2是并行执行的，等两个都执行完了，才会进入到then，all会把所有的结果放到一个数组中返回，所以我们打印出我们的结果为一个数组。</p>
<blockquote>
<p>值得注意的是，虽然p2的执行顺序比p1快，但是all会按照参数里面的数组顺序来返回结果。all的使用场景类似于，玩游戏的时候，需要提前将游戏需要的资源提前准备好，才进行页面的初始化。</p>
</blockquote>
<h1 id="promise-race方法"><a href="#promise-race方法" class="headerlink" title="promise.race方法"></a><strong>promise.race方法</strong></h1><blockquote>
<p>Promise.race 可以接收一个元素为 Promise 对象的数组作为参数，这个数组里面所有的 Promise 对象进行竞速，完成一个即可。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">var p1 = new Promise((resolve) => {</div><div class="line"> setTimeout(() => {</div><div class="line"> console.log('异步任务1执行完成');</div><div class="line"> resolve("第一个promise");</div><div class="line"> }, 3000);</div><div class="line">});</div><div class="line"> </div><div class="line">var p2 = new Promise((resolve) => {</div><div class="line"> setTimeout(() => {</div><div class="line"> console.log('异步任务2执行完成');</div><div class="line"> resolve("第二个promise");</div><div class="line"> }, 1000);</div><div class="line">});</div><div class="line"> </div><div class="line">Promise.race([p1, p2])</div><div class="line"> .then((result) => {</div><div class="line"> console.log(result);</div><div class="line"> });</div><div class="line"></div><div class="line">//异步任务2执行完成</div><div class="line">//第二个promise</div><div class="line">//异步任务1执行完成</div></pre></td></tr></table></figure>
<p>在then里面的回调开始执行时，p1 并没有停止，仍旧在执行。于是再过2秒后，输出了他们结束的标志。</p>
<p>这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">/请求某个图片资源</div><div class="line">function requestImg(){</div><div class="line"> var p = new Promise(function(resolve, reject){</div><div class="line"> var img = new Image();</div><div class="line"> img.onload = function(){</div><div class="line"> resolve(img);</div><div class="line"> }</div><div class="line"> img.src = 'xxxxxx';</div><div class="line"> });</div><div class="line"> return p;</div><div class="line">}</div><div class="line"></div><div class="line">//延时函数，用于给请求计时</div><div class="line">function timeout(){</div><div class="line"> var p = new Promise(function(resolve, reject){</div><div class="line"> setTimeout(function(){</div><div class="line"> reject('图片请求超时');</div><div class="line"> }, 5000);</div><div class="line"> });</div><div class="line"> return p;</div><div class="line">}</div><div class="line"></div><div class="line">Promise</div><div class="line"> .race([requestImg(), timeout()])</div><div class="line"> .then(function(results){</div><div class="line"> console.log(results);</div><div class="line"> })</div><div class="line"> .catch(function(err){</div><div class="line"> console.log(err);</div><div class="line"> });</div></pre></td></tr></table></figure>
<p>requestImg函数会异步请求一张图片，我把地址写为”xxxxxx”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。</p>
<h1 id="一道常见面试题"><a href="#一道常见面试题" class="headerlink" title="一道常见面试题"></a>一道常见面试题</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">setTimeout(function() {</div><div class="line"> console.log(1)</div><div class="line">}, 0);</div><div class="line"> </div><div class="line">new Promise(function executor(resolve) {</div><div class="line"> console.log(2);</div><div class="line"> for( var i=0 ; i<10000 ; i++ ) {</div><div class="line"> i == 9999 && resolve();</div><div class="line"> }</div><div class="line"> console.log(3);</div><div class="line">}).then(function() {</div><div class="line"> console.log(4);</div><div class="line">});</div><div class="line"> </div><div class="line">console.log(5);</div><div class="line"></div><div class="line">“2 3 5 4 1”</div></pre></td></tr></table></figure>
<h1 id="情景"><a href="#情景" class="headerlink" title="情景"></a>情景</h1><p>传入一个token，根据这个token请求一次网络，然后获取用户ID，将获取的用户ID访问数据库，获取用户信息</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line">var request = function (token) {</div><div class="line"> return new Promise((resolve, reject)=> {</div><div class="line"> setTimeout(()=> {</div><div class="line"> token ? resolve(2) : reject('token error');</div><div class="line"> },1000)</div><div class="line"> });</div><div class="line">};</div><div class="line"> </div><div class="line">var find = function (id) {</div><div class="line"> return new Promise((resolve, reject)=> {</div><div class="line"> setTimeout(()=> {</div><div class="line"> id ? resolve(id + '-info') : reject('id error');</div><div class="line"> },1000)</div><div class="line"> });</div><div class="line">};</div><div class="line"> </div><div class="line">request('token')</div><div class="line"> .then(function (id) {</div><div class="line"> return find(id);</div><div class="line"> })</div><div class="line"> .then(function (info) {</div><div class="line"> console.log( info);</div><div class="line"> });</div><div class="line"> </div><div class="line">co(function *() {</div><div class="line"> var id = yield request('token');</div><div class="line"> var info = yield find(id);</div><div class="line"> </div><div class="line"> console.log(id, info);</div><div class="line">});</div><div class="line"> </div><div class="line">(async function () {</div><div class="line"> var id = await request('token');</div><div class="line"> var info = await find(id);</div><div class="line"> </div><div class="line"> console.log(id, info);</div><div class="line">})();</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">技术</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/03/15/Promise的那些事/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-Fetch学习笔记" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/08/Fetch学习笔记/">Fetch学习笔记</a>
</h1>
<a href="/2017/03/08/Fetch学习笔记/" class="archive-article-date">
<time datetime="2017-03-08T12:05:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-03-08</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="fetch"><a href="#fetch" class="headerlink" title="fetch"></a>fetch</h1><blockquote>
<p>与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。</p>
</blockquote>
<h2 id="比较XMLHttpRequest（传统Ajax）"><a href="#比较XMLHttpRequest（传统Ajax）" class="headerlink" title="比较XMLHttpRequest（传统Ajax）"></a>比较XMLHttpRequest（传统Ajax）</h2><p>创建步骤：</p>
<blockquote>
<ul>
<li>创建<code>XMLHttpRequest</code>对象，也就是创建一个异步调用对象</li>
<li>创建一个新的<code>HTTP</code>请求，并指定该<code>HTTP</code>请求的方法、<code>URL</code>及验证信息</li>
<li>发送<code>HTTP</code>请求</li>
<li>处理响应，获取异步调用返回的数据</li>
</ul>
</blockquote>
<p>可以发现，主要的不同点在于：传统Ajax使用事件处理器，而不是Promise对象，并且请求的发起完全依赖于xhr对象所提供的方法。</p>
<h2 id="fetch语法"><a href="#fetch语法" class="headerlink" title="fetch语法"></a>fetch语法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">fetch(url)</div><div class="line"> .then(function(response) {</div><div class="line"> return response.json();</div><div class="line"> })</div><div class="line"> .then(function(data) {</div><div class="line"> console.log(data);</div><div class="line"> })</div><div class="line"> .catch(function(e) {</div><div class="line"> console.log("Oops, error");</div><div class="line"> });</div></pre></td></tr></table></figure>
<p>使用 ES6 的 <code>箭头函数</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">fetch(url)</div><div class="line"> .then(response => response.json())</div><div class="line"> .then(data => console.log(data))</div><div class="line"> .catch(e => console.log("Oops, error", e))</div></pre></td></tr></table></figure>
<p>使用 <code>async/await</code> 来做最终优化：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">(async function () {</div><div class="line"> try {</div><div class="line"> let response = await fetch(url);</div><div class="line"> let data = response.json();</div><div class="line"> console.log(data);</div><div class="line"> } catch(e) {</div><div class="line"> console.log("Oops, error", e);</div><div class="line"> }</div><div class="line">})();</div></pre></td></tr></table></figure>
<p>使用 await 后，<strong>写异步代码就像写同步代码一样爽</strong>。await 后面可以跟 Promise 对象，表示等待 Promise resolve() 才会继续向下执行，如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。</p>
<p>如果还不了解<code>async/await</code>，可以移步👉<a href="https://hzzly.github.io/2017/05/09/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-es6Async%E5%87%BD%E6%95%B0/" target="_blank" rel="external">es6Async</a>这篇博客</p>
<h2 id="GET请求"><a href="#GET请求" class="headerlink" title="GET请求"></a>GET请求</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">fetch(url, {</div><div class="line"> method: "GET", //默认</div><div class="line"> headers:{</div><div class="line"> "Accept": "application/json, text/plain, */*"</div><div class="line"> }</div><div class="line">})</div><div class="line">.then(response => response.json())</div><div class="line">.then(data => console.log(data))</div><div class="line">.catch(e => console.log("Oops, error", e))</div></pre></td></tr></table></figure>
<h2 id="POST请求"><a href="#POST请求" class="headerlink" title="POST请求"></a>POST请求</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">fetch(url, {</div><div class="line"> method: "POST",</div><div class="line"> headers: {</div><div class="line"> "Accept": "application/json, text/plain, */*",</div><div class="line"> "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"</div><div class="line"> },</div><div class="line"> body: "name=hzzly&age=22"</div><div class="line">})</div><div class="line">.then(response => response.json())</div><div class="line">.then(data => console.log(data))</div><div class="line">.catch(e => console.log("Oops, error", e))</div></pre></td></tr></table></figure>
<h2 id="使用Fetch请求发送凭证"><a href="#使用Fetch请求发送凭证" class="headerlink" title="使用Fetch请求发送凭证"></a>使用Fetch请求发送凭证</h2><blockquote>
<p>要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”：</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">fetch(url,{</div><div class="line"> credentials: "include"</div><div class="line">})</div></pre></td></tr></table></figure>
<h1 id="封装POST请求"><a href="#封装POST请求" class="headerlink" title="封装POST请求"></a>封装POST请求</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><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></pre></td><td class="code"><pre><div class="line">//将对象拼接成 name=hzzly&age=22 的字符串形式</div><div class="line">function params(obj) {</div><div class="line"> let result = ''</div><div class="line"> for(let item in obj) {</div><div class="line"> result += `&${item}=${obj[item]}`</div><div class="line"> }</div><div class="line"> if(result) {</div><div class="line"> result = result.slice(1)</div><div class="line"> }</div><div class="line"> return result</div><div class="line">}</div><div class="line"></div><div class="line">function post(url, paramsObj) {</div><div class="line"> let result = fetch(url, {</div><div class="line"> methods: 'POST',</div><div class="line"> credentials: "include"</div><div class="line"> headers: {</div><div class="line"> "Accept": "application/json, text/plain, */*",</div><div class="line"> "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"</div><div class="line"> },</div><div class="line"> body: params(paramsObj)</div><div class="line"> })</div><div class="line"> return result</div><div class="line">}</div><div class="line"></div><div class="line">let obj = {</div><div class="line"> name: 'hzzly',</div><div class="line"> age: 22</div><div class="line">}</div><div class="line">post(url, obj)</div><div class="line"> .then(response => response.json())</div><div class="line"> .then(data => console.log(data))</div><div class="line"> .catch(e => console.log("Oops, error",</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">技术</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/03/08/Fetch学习笔记/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/">Next »</a>
</nav>
</div>
</div>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
© 2020 Guohui
</div>
<div class="footer-right">
<a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
</div>
</div>
</div>
</footer>
</div>
<script>
var yiliaConfig = {
mathjax: false,
isHome: true,
isPost: false,
isArchive: false,
isTag: false,
isCategory: false,
open_in_new: false,
root: "/",
innerArchive: true,
showTags: false
}
</script>
<script>!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="./",n(0)}([function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,n){var e=/\/|index.html/g;return t.replace(e,"")===n.replace(e,"")}function i(){for(var t=document.querySelectorAll(".js-header-menu li a"),n=window.location.pathname,e=0,r=t.length;e<r;e++){var i=t[e];o(n,i.getAttribute("href"))&&(0,d.default)(i,"active")}}function u(t){for(var n=t.offsetLeft,e=t.offsetParent;null!==e;)n+=e.offsetLeft,e=e.offsetParent;return n}function f(t){for(var n=t.offsetTop,e=t.offsetParent;null!==e;)n+=e.offsetTop,e=e.offsetParent;return n}function c(t,n,e,r,o){var i=u(t),c=f(t)-n;if(c-e<=o){var a=t.$newDom;a||(a=t.cloneNode(!0),(0,h.default)(t,a),t.$newDom=a,a.style.position="fixed",a.style.top=(e||c)+"px",a.style.left=i+"px",a.style.zIndex=r||2,a.style.width="100%",a.style.color="#fff"),a.style.visibility="visible",t.style.visibility="hidden"}else{t.style.visibility="visible";var s=t.$newDom;s&&(s.style.visibility="hidden")}}function a(){var t=document.querySelector(".js-overlay"),n=document.querySelector(".js-header-menu");c(t,document.body.scrollTop,-63,2,0),c(n,document.body.scrollTop,1,3,0)}function s(){document.querySelector("#container").addEventListener("scroll",function(t){a()}),window.addEventListener("scroll",function(t){a()}),a()}function l(){x.default.versions.mobile&&window.screen.width<800&&(i(),s())}var p=e(71),d=r(p),v=e(72),y=(r(v),e(84)),h=r(y),b=e(69),x=r(b),m=e(75),g=r(m),w=e(70);l(),(0,w.addLoadEvent)(function(){g.default.init()}),t.exports={}},function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},function(t,n,e){var r=e(49),o=e(15);t.exports=function(t){return r(o(t))}},function(t,n,e){t.exports=!e(8)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,n,e){var r=e(6),o=e(12);t.exports=e(4)?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},function(t,n,e){var r=e(10),o=e(30),i=e(24),u=Object.defineProperty;n.f=e(4)?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return u(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},function(t,n,e){var r=e(22)("wks"),o=e(13),i=e(1).Symbol,u="function"==typeof i,f=t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))};f.store=r},function(t,n){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,n,e){var r=e(35),o=e(16);t.exports=Object.keys||function(t){return r(t,o)}},function(t,n,e){var r=e(11);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},function(t,n){var e=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=e)},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n){t.exports={}},function(t,n){t.exports=!0},function(t,n){n.f={}.propertyIsEnumerable},function(t,n,e){var r=e(6).f,o=e(2),i=e(7)("toStringTag");t.exports=function(t,n,e){t&&!o(t=e?t:t.prototype,i)&&r(t,i,{configurable:!0,value:n})}},function(t,n,e){var r=e(22)("keys"),o=e(13);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,n,e){var r=e(1),o="__core-js_shared__",i=r[o]||(r[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},function(t,n,e){var r=e(11);t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n,e){var r=e(1),o=e(14),i=e(18),u=e(26),f=e(6).f;t.exports=function(t){var n=o.Symbol||(o.Symbol=i?{}:r.Symbol||{});"_"==t.charAt(0)||t in n||f(n,t,{value:u.f(t)})}},function(t,n,e){n.f=e(7)},function(t,n,e){var r=e(1),o=e(14),i=e(46),u=e(5),f="prototype",c=function(t,n,e){var a,s,l,p=t&c.F,d=t&c.G,v=t&c.S,y=t&c.P,h=t&c.B,b=t&c.W,x=d?o:o[n]||(o[n]={}),m=x[f],g=d?r:v?r[n]:(r[n]||{})[f];d&&(e=n);for(a in e)s=!p&&g&&void 0!==g[a],s&&a in x||(l=s?g[a]:e[a],x[a]=d&&"function"!=typeof g[a]?e[a]:h&&s?i(l,r):b&&g[a]==l?function(t){var n=function(n,e,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(n);case 2:return new t(n,e)}return new t(n,e,r)}return t.apply(this,arguments)};return n[f]=t[f],n}(l):y&&"function"==typeof l?i(Function.call,l):l,y&&((x.virtual||(x.virtual={}))[a]=l,t&c.R&&m&&!m[a]&&u(m,a,l)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},function(t,n,e){var r=e(11),o=e(1).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,n,e){t.exports=!e(4)&&!e(8)(function(){return 7!=Object.defineProperty(e(29)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){"use strict";var r=e(18),o=e(27),i=e(36),u=e(5),f=e(2),c=e(17),a=e(51),s=e(20),l=e(58),p=e(7)("iterator"),d=!([].keys&&"next"in[].keys()),v="@@iterator",y="keys",h="values",b=function(){return this};t.exports=function(t,n,e,x,m,g,w){a(e,n,x);var O,S,_,j=function(t){if(!d&&t in A)return A[t];switch(t){case y:return function(){return new e(this,t)};case h:return function(){return new e(this,t)}}return function(){return new e(this,t)}},P=n+" Iterator",E=m==h,M=!1,A=t.prototype,T=A[p]||A[v]||m&&A[m],L=T||j(m),N=m?E?j("entries"):L:void 0,C="Array"==n?A.entries||T:T;if(C&&(_=l(C.call(new t)),_!==Object.prototype&&(s(_,P,!0),r||f(_,p)||u(_,p,b))),E&&T&&T.name!==h&&(M=!0,L=function(){return T.call(this)}),r&&!w||!d&&!M&&A[p]||u(A,p,L),c[n]=L,c[P]=b,m)if(O={values:E?L:j(h),keys:g?L:j(y),entries:N},w)for(S in O)S in A||i(A,S,O[S]);else o(o.P+o.F*(d||M),n,O);return O}},function(t,n,e){var r=e(10),o=e(55),i=e(16),u=e(21)("IE_PROTO"),f=function(){},c="prototype",a=function(){var t,n=e(29)("iframe"),r=i.length,o="<",u=">";for(n.style.display="none",e(48).appendChild(n),n.src="javascript:",t=n.contentWindow.document,t.open(),t.write(o+"script"+u+"document.F=Object"+o+"/script"+u),t.close(),a=t.F;r--;)delete a[c][i[r]];return a()};t.exports=Object.create||function(t,n){var e;return null!==t?(f[c]=r(t),e=new f,f[c]=null,e[u]=t):e=a(),void 0===n?e:o(e,n)}},function(t,n,e){var r=e(35),o=e(16).concat("length","prototype");n.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,n){n.f=Object.getOwnPropertySymbols},function(t,n,e){var r=e(2),o=e(3),i=e(45)(!1),u=e(21)("IE_PROTO");t.exports=function(t,n){var e,f=o(t),c=0,a=[];for(e in f)e!=u&&r(f,e)&&a.push(e);for(;n.length>c;)r(f,e=n[c++])&&(~i(a,e)||a.push(e));return a}},function(t,n,e){t.exports=e(5)},function(t,n,e){var r=e(15);t.exports=function(t){return Object(r(t))}},function(t,n,e){t.exports={default:e(41),__esModule:!0}},function(t,n,e){t.exports={default:e(42),__esModule:!0}},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}n.__esModule=!0;var o=e(39),i=r(o),u=e(38),f=r(u),c="function"==typeof f.default&&"symbol"==typeof i.default?function(t){return typeof t}:function(t){return t&&"function"==typeof f.default&&t.constructor===f.default&&t!==f.default.prototype?"symbol":typeof t};n.default="function"==typeof f.default&&"symbol"===c(i.default)?function(t){return"undefined"==typeof t?"undefined":c(t)}:function(t){return t&&"function"==typeof f.default&&t.constructor===f.default&&t!==f.default.prototype?"symbol":"undefined"==typeof t?"undefined":c(t)}},function(t,n,e){e(65),e(63),e(66),e(67),t.exports=e(14).Symbol},function(t,n,e){e(64),e(68),t.exports=e(26).f("iterator")},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n){t.exports=function(){}},function(t,n,e){var r=e(3),o=e(61),i=e(60);t.exports=function(t){return function(n,e,u){var f,c=r(n),a=o(c.length),s=i(u,a);if(t&&e!=e){for(;a>s;)if(f=c[s++],f!=f)return!0}else for(;a>s;s++)if((t||s in c)&&c[s]===e)return t||s||0;return!t&&-1}}},function(t,n,e){var r=e(43);t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)}}return function(){return t.apply(n,arguments)}}},function(t,n,e){var r=e(9),o=e(34),i=e(19);t.exports=function(t){var n=r(t),e=o.f;if(e)for(var u,f=e(t),c=i.f,a=0;f.length>a;)c.call(t,u=f[a++])&&n.push(u);return n}},function(t,n,e){t.exports=e(1).document&&document.documentElement},function(t,n,e){var r=e(28);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,n,e){var r=e(28);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,n,e){"use strict";var r=e(32),o=e(12),i=e(20),u={};e(5)(u,e(7)("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=r(u,{next:o(1,e)}),i(t,n+" Iterator")}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,e){var r=e(9),o=e(3);t.exports=function(t,n){for(var e,i=o(t),u=r(i),f=u.length,c=0;f>c;)if(i[e=u[c++]]===n)return e}},function(t,n,e){var r=e(13)("meta"),o=e(11),i=e(2),u=e(6).f,f=0,c=Object.isExtensible||function(){return!0},a=!e(8)(function(){return c(Object.preventExtensions({}))}),s=function(t){u(t,r,{value:{i:"O"+ ++f,w:{}}})},l=function(t,n){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!c(t))return"F";if(!n)return"E";s(t)}return t[r].i},p=function(t,n){if(!i(t,r)){if(!c(t))return!0;if(!n)return!1;s(t)}return t[r].w},d=function(t){return a&&v.NEED&&c(t)&&!i(t,r)&&s(t),t},v=t.exports={KEY:r,NEED:!1,fastKey:l,getWeak:p,onFreeze:d}},function(t,n,e){var r=e(6),o=e(10),i=e(9);t.exports=e(4)?Object.defineProperties:function(t,n){o(t);for(var e,u=i(n),f=u.length,c=0;f>c;)r.f(t,e=u[c++],n[e]);return t}},function(t,n,e){var r=e(19),o=e(12),i=e(3),u=e(24),f=e(2),c=e(30),a=Object.getOwnPropertyDescriptor;n.f=e(4)?a:function(t,n){if(t=i(t),n=u(n,!0),c)try{return a(t,n)}catch(t){}if(f(t,n))return o(!r.f.call(t,n),t[n])}},function(t,n,e){var r=e(3),o=e(33).f,i={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],f=function(t){try{return o(t)}catch(t){return u.slice()}};t.exports.f=function(t){return u&&"[object Window]"==i.call(t)?f(t):o(r(t))}},function(t,n,e){var r=e(2),o=e(37),i=e(21)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,n,e){var r=e(23),o=e(15);t.exports=function(t){return function(n,e){var i,u,f=String(o(n)),c=r(e),a=f.length;return c<0||c>=a?t?"":void 0:(i=f.charCodeAt(c),i<55296||i>56319||c+1===a||(u=f.charCodeAt(c+1))<56320||u>57343?t?f.charAt(c):i:t?f.slice(c,c+2):(i-55296<<10)+(u-56320)+65536)}}},function(t,n,e){var r=e(23),o=Math.max,i=Math.min;t.exports=function(t,n){return t=r(t),t<0?o(t+n,0):i(t,n)}},function(t,n,e){var r=e(23),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,n,e){"use strict";var r=e(44),o=e(52),i=e(17),u=e(3);t.exports=e(31)(Array,"Array",function(t,n){this._t=u(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,e=this._i++;return!t||e>=t.length?(this._t=void 0,o(1)):"keys"==n?o(0,e):"values"==n?o(0,t[e]):o(0,[e,t[e]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,n){},function(t,n,e){"use strict";var r=e(59)(!0);e(31)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,e=this._i;return e>=n.length?{value:void 0,done:!0}:(t=r(n,e),this._i+=t.length,{value:t,done:!1})})},function(t,n,e){"use strict";var r=e(1),o=e(2),i=e(4),u=e(27),f=e(36),c=e(54).KEY,a=e(8),s=e(22),l=e(20),p=e(13),d=e(7),v=e(26),y=e(25),h=e(53),b=e(47),x=e(50),m=e(10),g=e(3),w=e(24),O=e(12),S=e(32),_=e(57),j=e(56),P=e(6),E=e(9),M=j.f,A=P.f,T=_.f,L=r.Symbol,N=r.JSON,C=N&&N.stringify,k="prototype",F=d("_hidden"),q=d("toPrimitive"),I={}.propertyIsEnumerable,B=s("symbol-registry"),D=s("symbols"),W=s("op-symbols"),H=Object[k],K="function"==typeof L,R=r.QObject,J=!R||!R[k]||!R[k].findChild,U=i&&a(function(){return 7!=S(A({},"a",{get:function(){return A(this,"a",{value:7}).a}})).a})?function(t,n,e){var r=M(H,n);r&&delete H[n],A(t,n,e),r&&t!==H&&A(H,n,r)}:A,G=function(t){var n=D[t]=S(L[k]);return n._k=t,n},$=K&&"symbol"==typeof L.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof L},z=function(t,n,e){return t===H&&z(W,n,e),m(t),n=w(n,!0),m(e),o(D,n)?(e.enumerable?(o(t,F)&&t[F][n]&&(t[F][n]=!1),e=S(e,{enumerable:O(0,!1)})):(o(t,F)||A(t,F,O(1,{})),t[F][n]=!0),U(t,n,e)):A(t,n,e)},Y=function(t,n){m(t);for(var e,r=b(n=g(n)),o=0,i=r.length;i>o;)z(t,e=r[o++],n[e]);return t},Q=function(t,n){return void 0===n?S(t):Y(S(t),n)},X=function(t){var n=I.call(this,t=w(t,!0));return!(this===H&&o(D,t)&&!o(W,t))&&(!(n||!o(this,t)||!o(D,t)||o(this,F)&&this[F][t])||n)},V=function(t,n){if(t=g(t),n=w(n,!0),t!==H||!o(D,n)||o(W,n)){var e=M(t,n);return!e||!o(D,n)||o(t,F)&&t[F][n]||(e.enumerable=!0),e}},Z=function(t){for(var n,e=T(g(t)),r=[],i=0;e.length>i;)o(D,n=e[i++])||n==F||n==c||r.push(n);return r},tt=function(t){for(var n,e=t===H,r=T(e?W:g(t)),i=[],u=0;r.length>u;)!o(D,n=r[u++])||e&&!o(H,n)||i.push(D[n]);return i};K||(L=function(){if(this instanceof L)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),n=function(e){this===H&&n.call(W,e),o(this,F)&&o(this[F],t)&&(this[F][t]=!1),U(this,t,O(1,e))};return i&&J&&U(H,t,{configurable:!0,set:n}),G(t)},f(L[k],"toString",function(){return this._k}),j.f=V,P.f=z,e(33).f=_.f=Z,e(19).f=X,e(34).f=tt,i&&!e(18)&&f(H,"propertyIsEnumerable",X,!0),v.f=function(t){return G(d(t))}),u(u.G+u.W+u.F*!K,{Symbol:L});for(var nt="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),et=0;nt.length>et;)d(nt[et++]);for(var nt=E(d.store),et=0;nt.length>et;)y(nt[et++]);u(u.S+u.F*!K,"Symbol",{for:function(t){return o(B,t+="")?B[t]:B[t]=L(t)},keyFor:function(t){if($(t))return h(B,t);throw TypeError(t+" is not a symbol!")},useSetter:function(){J=!0},useSimple:function(){J=!1}}),u(u.S+u.F*!K,"Object",{create:Q,defineProperty:z,defineProperties:Y,getOwnPropertyDescriptor:V,getOwnPropertyNames:Z,getOwnPropertySymbols:tt}),N&&u(u.S+u.F*(!K||a(function(){var t=L();return"[null]"!=C([t])||"{}"!=C({a:t})||"{}"!=C(Object(t))})),"JSON",{stringify:function(t){if(void 0!==t&&!$(t)){for(var n,e,r=[t],o=1;arguments.length>o;)r.push(arguments[o++]);return n=r[1],"function"==typeof n&&(e=n),!e&&x(n)||(n=function(t,n){if(e&&(n=e.call(this,t,n)),!$(n))return n}),r[1]=n,C.apply(N,r)}}}),L[k][q]||e(5)(L[k],q,L[k].valueOf),l(L,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},function(t,n,e){e(25)("asyncIterator")},function(t,n,e){e(25)("observable")},function(t,n,e){e(62);for(var r=e(1),o=e(5),i=e(17),u=e(7)("toStringTag"),f=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],c=0;c<5;c++){var a=f[c],s=r[a],l=s&&s.prototype;l&&!l[u]&&o(l,u,a),i[a]=i.Array}},function(t,n){"use strict";var e={versions:function(){var t=window.navigator.userAgent;return{trident:t.indexOf("Trident")>-1,presto:t.indexOf("Presto")>-1,webKit:t.indexOf("AppleWebKit")>-1,gecko:t.indexOf("Gecko")>-1&&t.indexOf("KHTML")==-1,mobile:!!t.match(/AppleWebKit.*Mobile.*/),ios:!!t.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),android:t.indexOf("Android")>-1||t.indexOf("Linux")>-1,iPhone:t.indexOf("iPhone")>-1||t.indexOf("Mac")>-1,iPad:t.indexOf("iPad")>-1,webApp:t.indexOf("Safari")==-1,weixin:t.indexOf("MicroMessenger")==-1}}()};t.exports=e},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var o=e(40),i=r(o),u=function(){function t(t,n,e){return n||e?String.fromCharCode(n||e):o[t]||t}function n(t){return l[t]}var e=/"|<|>|&| |'|&#(\d+);|&#(\d+)/g,r=/['<> "&]/g,o={""":'"',"<":"<",">":">","&":"&"," ":" "},f=/\u00a0/g,c=/<br\s*\/?>/gi,a=/\r?\n/g,s=/\s/g,l={};for(var p in o)l[o[p]]=p;return o["'"]="'",l["'"]="'",{encode:function(t){return t?(""+t).replace(r,n).replace(a,"<br/>").replace(s," "):""},decode:function(n){return n?(""+n).replace(c,"\n").replace(e,t).replace(f," "):""},encodeBase16:function(t){if(!t)return t;t+="";for(var n=[],e=0,r=t.length;r>e;e++)n.push(t.charCodeAt(e).toString(16).toUpperCase());return n.join("")},encodeBase16forJSON:function(t){if(!t)return t;t=t.replace(/[\u4E00-\u9FBF]/gi,function(t){return escape(t).replace("%u","\\u")});for(var n=[],e=0,r=t.length;r>e;e++)n.push(t.charCodeAt(e).toString(16).toUpperCase());return n.join("")},decodeBase16:function(t){if(!t)return t;t+="";for(var n=[],e=0,r=t.length;r>e;e+=2)n.push(String.fromCharCode("0x"+t.slice(e,e+2)));return n.join("")},encodeObject:function(t){if(t instanceof Array)for(var n=0,e=t.length;e>n;n++)t[n]=u.encodeObject(t[n]);else if("object"==("undefined"==typeof t?"undefined":(0,i.default)(t)))for(var r in t)t[r]=u.encodeObject(t[r]);else if("string"==typeof t)return u.encode(t);return t},loadScript:function(t){var n=document.createElement("script");document.getElementsByTagName("body")[0].appendChild(n),n.setAttribute("src",t)},addLoadEvent:function(t){var n=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){n(),t()}}}}();t.exports=u},function(t,n){function e(t,n){t.classList?t.classList.add(n):t.className+=" "+n}t.exports=e},function(t,n){function e(t,n){if(t.classList)t.classList.remove(n);else{var e=new RegExp("(^|\\b)"+n.split(" ").join("|")+"(\\b|$)","gi");t.className=t.className.replace(e," ")}}t.exports=e},,,function(t,n){"use strict";function e(){var t=document.querySelector("#page-nav");if(t&&!document.querySelector("#page-nav .extend.prev")&&(t.innerHTML='<a class="extend prev disabled" rel="prev">« Prev</a>'+t.innerHTML),t&&!document.querySelector("#page-nav .extend.next")&&(t.innerHTML=t.innerHTML+'<a class="extend next disabled" rel="next">Next »</a>'),yiliaConfig&&yiliaConfig.open_in_new){var n=document.querySelectorAll(".article-entry a:not(.article-more-a)");n.forEach(function(t){t.setAttribute("target","_blank")})}var e=document.querySelector("#js-aboutme");e&&0!==e.length&&(e.innerHTML=e.innerText)}t.exports={init:e}},,,,,,,,,function(t,n){function e(t,n){if("string"==typeof n)return t.insertAdjacentHTML("afterend",n);var e=t.nextSibling;return e?t.parentNode.insertBefore(n,e):t.parentNode.appendChild(n)}t.exports=e}])</script><script src="/./main.234bc0.js"></script><script>!function(){var e=function(e){var t=document.createElement("script");document.getElementsByTagName("body")[0].appendChild(t),t.setAttribute("src",e)};e("/slider.885efe.js")}()</script>
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
<div class="tools-nav header-menu">
<ul style="width: 70%">
<li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'innerArchive')"><a href="javascript:void(0)" q-class="active:innerArchive">所有文章</a></li>
<li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'friends')"><a href="javascript:void(0)" q-class="active:friends">友链</a></li>
<li style="width: 33.333333333333336%" q-on="click: openSlider(e, 'aboutme')"><a href="javascript:void(0)" q-class="active:aboutme">关于我</a></li>
</ul>
</div>
<div class="tools-wrap">
<section class="tools-section tools-section-all" q-show="innerArchive">
<div class="search-wrap">
<input class="search-ipt" q-model="search" type="text" placeholder="find something…">
<i class="icon-search icon" q-show="search|isEmptyStr"></i>
<i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
</div>
<div class="widget tagcloud search-tag">
<p class="search-tag-wording">tag:</p>
<label class="search-switch">
<input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
</label>
<ul class="article-tag-list" q-show="showTags">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag color3">技术</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag color3">随笔</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag color3">相册</a>
</li>
<div class="clearfix"></div>
</ul>
</div>
<ul class="search-ul">
<p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
</pre>
</p>
<li class="search-li" q-repeat="items" q-show="isShow">
<a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
<p class="search-time">
<i class="icon-calendar icon"></i>
<span q-text="date|dateformat"></span>
</p>
<p class="search-tag">
<i class="icon-price-tags icon"></i>
<span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
</p>