-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
5215 lines (4977 loc) · 879 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[更新停一段时间]]></title>
<url>/2018/09/20/%E6%BA%9C%E4%B8%80%E6%AE%B5%E6%97%B6%E9%97%B4/</url>
<content type="html"><![CDATA[<p>主力同事离职,再加上最近接连几个大项目,小黄人小应用(这个有空要好好说说,可要了我老命啊)附近的人(没错,我们 app 终于有添加陌生人的入口了)….<br>so,天天工作好累哦,回家就想睡觉觉,更新割一段时间.</p>
]]></content>
<categories>
<category> 杂货铺 </category>
</categories>
<tags>
<tag> 杂谈 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[html5直播]]></title>
<url>/2018/07/20/html5%E7%9B%B4%E6%92%AD/</url>
<content type="html"><![CDATA[<p>一直喜欢看斗鱼上面 dota2 比赛,突然有一天对直播很感兴趣,所以了解一下.</p>
<a id="more"></a>
<h3 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h3><p>pc 端采集=> H264 压缩 => 推流 => CDN => 播放</p>
<h3 id="协议"><a href="#协议" class="headerlink" title="协议"></a>协议</h3><p>HLS 协议<br>video <=> M3U8 => segment-1.ts<br>M3U8 是一个包含很多 ts 文件地址列表的文本文件,有 2 种类型<br>全量列表: 点播使用,包含一段视频所有 ts 文件<br>动态列表: 直播使用,动态更新 ts 文件地址<br>简单的一个方案,比如斗鱼使用<br>因为 M3U8 下面切片了几个 ts 文件,导致有延时,实时性不太好</p>
<p>HTTP-FLV 协议<br>传送 flv 格式的视频,http 长连接导致没有过多的延迟性<br>比较综合的一种方案,B 站使用</p>
<h3 id="video"><a href="#video" class="headerlink" title="video"></a>video</h3><p>####attribute<br>controls 控制面板<br>poster 第一帧贴图<br>autoplay 自动播放<br>muted 静音<br>loop 循环播放<br>preload 预加载</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> v = <span class="built_in">document</span>.getElementById(<span class="string">'video'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 音量控制</span></span><br><span class="line">v.volume = <span class="number">0.5</span>;</span><br><span class="line"><span class="comment">// 播放时间控制</span></span><br><span class="line">v.currentTime = <span class="number">60</span>;<span class="comment">// 单位：秒</span></span><br><span class="line"><span class="comment">//播放地址切换</span></span><br><span class="line">v.src = <span class="string">'./....MP4'</span></span><br></pre></td></tr></table></figure>
<h4 id="event"><a href="#event" class="headerlink" title="event"></a>event</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// loadstart</span></span><br><span class="line">v.addEventListener(<span class="string">'loadstart'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="comment">//开始加载</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// durationchange</span></span><br><span class="line">v.addEventListener(<span class="string">'durationchange'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'durationchange'</span>, v.duration);</span><br><span class="line"><span class="comment">// 视频长度变化</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// loadedmetadata</span></span><br><span class="line">v.addEventListener(<span class="string">'loadedmetadata'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'loadedmetadata'</span>);</span><br><span class="line"><span class="comment">//加载数据</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// loadeddata</span></span><br><span class="line">v.addEventListener(<span class="string">'loadeddata'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'loadeddata'</span>);</span><br><span class="line"><span class="comment">//加载数据结束</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// progress</span></span><br><span class="line">v.addEventListener(<span class="string">'progress'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'progress'</span>);</span><br><span class="line"><span class="comment">// 加载片段...</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// canplay</span></span><br><span class="line">v.addEventListener(<span class="string">'canplay'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'canplay'</span>);</span><br><span class="line"><span class="comment">//可以播放</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// canplaythrough</span></span><br><span class="line">v.addEventListener(<span class="string">'canplaythrough'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'canplaythrough'</span>);</span><br><span class="line"><span class="comment">// 可以流畅播放</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// play</span></span><br><span class="line">v.addEventListener(<span class="string">'play'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'play'</span>);</span><br><span class="line"><span class="comment">//播放</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// pause</span></span><br><span class="line">v.addEventListener(<span class="string">'pause'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'pause'</span>);</span><br><span class="line"><span class="comment">//暂停</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// seeking</span></span><br><span class="line">v.addEventListener(<span class="string">'seeking'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'seeking'</span>);</span><br><span class="line"><span class="comment">// 播放跳转</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// seeded</span></span><br><span class="line">v.addEventListener(<span class="string">'seeked'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'seeded'</span>);</span><br><span class="line"><span class="comment">//跳转结束</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// waiting</span></span><br><span class="line">v.addEventListener(<span class="string">'waiting'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'waiting'</span>);</span><br><span class="line"><span class="comment">// 播放等待中</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// playing</span></span><br><span class="line">v.addEventListener(<span class="string">'playing'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'playing'</span>);</span><br><span class="line"><span class="comment">// 播放中</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// timeupdate</span></span><br><span class="line">v.addEventListener(<span class="string">'timeupdate'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'timeupdate'</span>);</span><br><span class="line"><span class="comment">// 当前播放时间变化</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// ended</span></span><br><span class="line">v.addEventListener(<span class="string">'ended'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'ended'</span>);</span><br><span class="line"><span class="comment">// 播放结束</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// error</span></span><br><span class="line">v.addEventListener(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'error'</span>, e);</span><br><span class="line"><span class="comment">// 加载错误</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h3 id="推流"><a href="#推流" class="headerlink" title="推流"></a>推流</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 安装nginx和rtmp模块</span></span><br><span class="line">brew install nginx-full --with-rtmp-module</span><br><span class="line"><span class="meta">#</span><span class="bash"> 安装推流工具</span></span><br><span class="line">brew install ffmpeg</span><br><span class="line"><span class="meta">#</span><span class="bash"> 安到哪了</span></span><br><span class="line"> brew info nginx-full</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">// 打开nginx配置</span><br><span class="line"> http {</span><br><span class="line"> server {</span><br><span class="line"> listen 8080;</span><br><span class="line"> location /hls {</span><br><span class="line"> # Serve HLS fragments</span><br><span class="line"> types {</span><br><span class="line"> application/vnd.apple.mpegurl m3u8;</span><br><span class="line"> video/mp2t ts;</span><br><span class="line"> }</span><br><span class="line"> root ...; # 同下方配置</span><br><span class="line"> expires -1;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ……</span><br><span class="line"> }</span><br><span class="line"> // 在http节点后面加上rtmp配置：</span><br><span class="line"> rtmp {</span><br><span class="line"> server {</span><br><span class="line"> listen 1935;</span><br><span class="line"> chunk_size 4000;</span><br><span class="line"> application rtmplive {</span><br><span class="line"> live on;</span><br><span class="line"> record off;</span><br><span class="line"> }</span><br><span class="line"> application hls {</span><br><span class="line"> live on;</span><br><span class="line"> hls on;</span><br><span class="line"> hls_path 绝对路径; # 对应上方root配置</span><br><span class="line"> hls_fragment 5s;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>下载一个 vlc 播放器 File=> Open Network 输入<br><code>rtmp://localhost:1935/rtmplive/...</code></p>
<p>rtmp 推流<br><code>ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/...</code></p>
<p>http 推流<br><code>ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/...</code></p>
<p>封装好的工具推流<br><code>ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://localhost:1935/live/movie</code></p>
<p>###框架</p>
<p>目前关于直播有 3 个成熟的框架</p>
<p>video.js 全家桶框架,包含各种插件与 ui 样式</p>
<p>hls.js 基于 hls 协议的直播框架,可以将不兼容 hls 协议的游览器支持 hls 协议,一个专注与内核的框架</p>
<p>flv.js bilibili 开源的 http-flv 协议的直播框架,用法与 hls 差不多</p>
]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于promise的实现]]></title>
<url>/2018/07/14/%E5%85%B3%E4%BA%8Epromise%E7%9A%84%E5%AE%9E%E7%8E%B0/</url>
<content type="html"><![CDATA[<p>自从有了 promise，我写异步代码就是一个 then，then 的层级深了就是一个 async，包治百病，哈哈哈哈。。。。<br>今天就来探讨一下，一个 promise 是如何实现的</p>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Promise</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(executor) {</span><br><span class="line"> <span class="keyword">this</span>.state = <span class="string">'pending'</span> <span class="comment">//根据当前状态决定执行函数</span></span><br><span class="line"> <span class="keyword">this</span>.value = <span class="literal">undefined</span> <span class="comment">//正确值</span></span><br><span class="line"> <span class="keyword">this</span>.reason = <span class="literal">undefined</span> <span class="comment">//错误原因</span></span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks = [] <span class="comment">//正确函数执行顺序数组</span></span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks = [] <span class="comment">//错误函数执行顺序数组</span></span><br><span class="line"> <span class="keyword">let</span> resolve = <span class="function"><span class="params">value</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="keyword">this</span>.state = <span class="string">'fulfilled'</span></span><br><span class="line"> <span class="keyword">this</span>.value = value</span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks.forEach(<span class="function"><span class="params">fn</span> =></span> fn())</span><br><span class="line"> } <span class="comment">//看看你天天resolve(value)的函数内部干了什么</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> reject = <span class="function"><span class="params">reason</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="keyword">this</span>.state = <span class="string">'rejected'</span></span><br><span class="line"> <span class="keyword">this</span>.reason = reason</span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">fn</span> =></span> fn())</span><br><span class="line"> } <span class="comment">//看看你天天resolve(err)的函数内部干了什么</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> executor(resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> then(onFulfilled, onRejected) {</span><br><span class="line"> <span class="comment">//oh,then你会为什么这么好用，大部分人是不是不知道可以放2个函数参数的</span></span><br><span class="line"> onFulfilled = <span class="keyword">typeof</span> onFulfilled === <span class="string">'function'</span> ? onFulfilled : <span class="function"><span class="params">value</span> =></span> value</span><br><span class="line"> onRejected =</span><br><span class="line"> <span class="keyword">typeof</span> onRejected === <span class="string">'function'</span></span><br><span class="line"> ? onRejected</span><br><span class="line"> : <span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> <span class="keyword">throw</span> err</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> promise2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="comment">//可以让我们一直then下去的关键，因为then里面封装返回了一个promise</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state === <span class="string">'fulfilled'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="comment">//promise标准规定参数函数必须是异步调用</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onFulfilled(<span class="keyword">this</span>.value)</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state === <span class="string">'rejected'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onRejected(<span class="keyword">this</span>.reason)</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.state === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks.push(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onFulfilled(<span class="keyword">this</span>.value)</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onRejected(<span class="keyword">this</span>.reason)</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> promise2</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">catch</span>(fn) {</span><br><span class="line"> <span class="comment">//catch只是then的一层封装</span></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.then(<span class="literal">null</span>, fn)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//resolvePromise函数，处理自己return的promise和默认的promise2的关系</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resolvePromise</span>(<span class="params">promise2, x, resolve, reject</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (x === promise2) {</span><br><span class="line"> <span class="keyword">return</span> reject(<span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">'Chaining cycle detected for promise'</span>))</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> called</span><br><span class="line"> <span class="keyword">if</span> (x != <span class="literal">null</span> && (<span class="keyword">typeof</span> x === <span class="string">'object'</span> || <span class="keyword">typeof</span> x === <span class="string">'function'</span>)) {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> then = x.then</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> then === <span class="string">'function'</span>) {</span><br><span class="line"> then.call(</span><br><span class="line"> x,</span><br><span class="line"> y => {</span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span></span><br><span class="line"> called = <span class="literal">true</span></span><br><span class="line"> resolvePromise(promise2, y, resolve, reject)</span><br><span class="line"> },</span><br><span class="line"> err => {</span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span></span><br><span class="line"> called = <span class="literal">true</span></span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line"> )</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(x)</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span></span><br><span class="line"> called = <span class="literal">true</span></span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(x)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//上面就是主要流程了，下面都是语法糖</span></span><br><span class="line"><span class="comment">//resolve方法</span></span><br><span class="line"><span class="built_in">Promise</span>.resolve = <span class="function"><span class="keyword">function</span>(<span class="params">val</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> resolve(val)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="comment">//reject方法</span></span><br><span class="line"><span class="built_in">Promise</span>.reject = <span class="function"><span class="keyword">function</span>(<span class="params">val</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> reject(val)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="comment">//race方法</span></span><br><span class="line"><span class="built_in">Promise</span>.race = <span class="function"><span class="keyword">function</span>(<span class="params">promises</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < promises.length; i++) {</span><br><span class="line"> promises[i].then(resolve, reject)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="comment">//all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)</span></span><br><span class="line"><span class="built_in">Promise</span>.all = <span class="function"><span class="keyword">function</span>(<span class="params">promises</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> arr = []</span><br><span class="line"> <span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">processData</span>(<span class="params">index, data</span>) </span>{</span><br><span class="line"> arr[index] = data</span><br><span class="line"> i++</span><br><span class="line"> <span class="keyword">if</span> (i == promises.length) {</span><br><span class="line"> resolve(arr)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < promises.length; i++) {</span><br><span class="line"> promises[i].then(<span class="function"><span class="params">data</span> =></span> {</span><br><span class="line"> processData(i, data)</span><br><span class="line"> }, reject)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于http/tcp协议]]></title>
<url>/2018/06/02/%E5%85%B3%E4%BA%8Ehttp-tcp%E5%8D%8F%E8%AE%AE/</url>
<content type="html"><![CDATA[<p>http/tcp 协议是程序员必须知道的东西,目前先简单了解一下,后续还需要继续做功课…</p>
<a id="more"></a>
<h3 id="http-的发展"><a href="#http-的发展" class="headerlink" title="http 的发展"></a>http 的发展</h3><p>目前还在使用的版本是 http1.1 版本,有许多问题,比如请求按照顺序响应,造成了一些客户端优化(合并文件,减少请求数,img 放入 css 等)<br>未来的 http2 会很好的解决这个问题<br><br></p>
<p>五层网络:</p>
<ul>
<li>tcp 用于传输层,http 用于应用层,至于还有的下三层,暂时不需要了解</li>
</ul>
<p>http 的连接需要 3 次握手,1.1 版本可以保持连接,直到一段时间不响应自动中断,免除了重复握手的性能消耗</p>
<p><br><br>URI(url urn) 统一资源标志符:</p>
<ul>
<li>url: 平时我们见到的网址链接</li>
<li>urn: 目前还没什么用</li>
</ul>
<p>http code</p>
<ul>
<li>1 开头 需要继续操作</li>
<li>2 开头代表成功</li>
<li>3 开头代表需要从定向从其他地方获取资源</li>
<li>4 开头代表失败了</li>
<li>5 服务端错误</li>
</ul>
<h3 id="http-相关特性"><a href="#http-相关特性" class="headerlink" title="http 相关特性"></a>http 相关特性</h3><p>跨域: 这个是游览器限制,请求已经发送了,内容也已经返回了,但是游览器限制了这个内容,服务端请求没有这个问题<br>解决跨域 1. jsonp 2. cors(推荐阮老师的博客相关文章)</p>
<p>关于 cors:<br>默认只允许 post get head 方法 text/plain multipart/form-data application/x-www-form-urlencoded 请求格式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">response.writeHead(<span class="number">200</span>, {</span><br><span class="line"> <span class="string">'Access-Control-Allow-Origin'</span>: <span class="string">'*'</span>, <span class="comment">// 允许请求域名</span></span><br><span class="line"> <span class="string">'Access-Control-Allow-Headers'</span>: <span class="string">'*'</span>, <span class="comment">// 允许的请求头</span></span><br><span class="line"> <span class="string">'Access-Control-Allow-Methods'</span>: <span class="string">'Post,PUT,Delete'</span>, <span class="comment">//允许跨域请求的方法</span></span><br><span class="line"> <span class="string">'Access-Control-Max-Age'</span>: <span class="string">'1000'</span>, <span class="comment">// 1000s内部不再需要预请求</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="Cache-Control"><a href="#Cache-Control" class="headerlink" title="Cache-Control:"></a>Cache-Control:</h3><ul>
<li>public: 所有地方包括代理服务器都可以缓存</li>
<li>private: 只有游览器可以缓存</li>
<li>no-cache: (需要服务器验证才可以使用缓存)</li>
<li>no-store: 不可以使用缓存</li>
</ul>
<p>到期:</p>
<ul>
<li>max-age = <seconds> 过期时间</seconds></li>
<li>s-maxage= <seconds> 只在代理服务器生效</seconds></li>
<li>max-stale = <seconds> 即使过期了也继续使用缓存</seconds></li>
</ul>
<p>验证:</p>
<ul>
<li>Last-Modified 服务端上次修改时间,游览器储存</li>
<li>If-Modified-Since 游览器请求带上储存的上次修改时间去匹配</li>
<li>Etag hash 计算文件内容,通过签名验证文件变动</li>
<li>must-revalidate 过期了去原服务器拿数据</li>
<li>proxy-revalidate 过期了去代理服务器拿数据</li>
</ul>
<p>Cookie:</p>
<ul>
<li>max-age 和 expires 设置过期时间</li>
<li>Secure 只在 https 的时候发送</li>
<li>HttpOnly 无法通过 document.cookie 访问</li>
</ul>
<h3 id="http-长连接"><a href="#http-长连接" class="headerlink" title="http 长连接"></a>http 长连接</h3><p>Connection: keep-alive / close<br>http1.1 同一个域名下一般最多 6 个 http 链接,后面可复用前面的链接不需要再次 3 次握手,默认是打开的,可设置 close 关闭<br>http2 可以并发的处理请求,就没有这个限制了</p>
<h3 id="数据协商"><a href="#数据协商" class="headerlink" title="数据协商"></a>数据协商</h3><p>——- 客户端<br>Accept: 需要的数据类型<br>Accept-Encoding: 如何进行数据压缩<br>Accept-Language: 语言种类<br>User-Agent: 游览器种类,系统版本等相关信息</p>
<p>—— 服务端<br>Content-Type 返回的数据类型<br>Content-Encoding: 压缩方式<br>Content-Language: 语言</p>
<h3 id="Redirect-重定向"><a href="#Redirect-重定向" class="headerlink" title="Redirect: 重定向"></a>Redirect: 重定向</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 302 是临时跳转 301 是永久跳转 游览器会缓存 使用要慎重</span></span><br><span class="line">response.writeHead(<span class="number">302</span>, {</span><br><span class="line"> Location: <span class="string">'/new'</span>,</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="CSP-游览器安全限制"><a href="#CSP-游览器安全限制" class="headerlink" title="CSP: 游览器安全限制"></a>CSP: 游览器安全限制</h3><p>服务端可以通过设置这个头限制 html 里面内联的 js 运行,防止注入攻击</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 302 是临时跳转 301 是永久跳转 游览器会缓存 使用要慎重</span></span><br><span class="line">response.writeHead(<span class="number">302</span>, {</span><br><span class="line"> <span class="string">'Content-Security-Policy'</span>: <span class="string">'default-src http: https:'</span>,</span><br><span class="line"> <span class="string">'Content-Security-Policy'</span>: <span class="string">'default-src \'self\; form-action \'self\', // 也可以限制表单的提交范围</span></span><br><span class="line"><span class="string"> '</span>Content-Security-Policy<span class="string">': '</span><span class="keyword">default</span>-src \<span class="string">'self\' http://url'</span> <span class="comment">//限制外链链接 只能使用自己网站的 可以手动添加允许链接</span></span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<h3 id="http2"><a href="#http2" class="headerlink" title="http2"></a>http2</h3><p>信道复用:只需要一个 http 连接<br>分帧传输: 可以并发发送请求<br>Server Push: 服务端推送</p>
<p>相较于 http1.1 http2 性能提升非常明显,所以有条件的话建议通过 nginx 配置 http2</p>
<p>待续……</p>
]]></content>
<categories>
<category> 杂货铺 </category>
</categories>
<tags>
<tag> http </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于Hybrid]]></title>
<url>/2018/05/19/%E5%85%B3%E4%BA%8Ehybrid/</url>
<content type="html"><![CDATA[<p>公司如果是做 app 的,前端不会 hybrid 就不用混了,用了这么久,总结一下自己对 hybrid 的理解~~</p>
<a id="more"></a>
<p>hybrid: 前端与客户端一起玩(开发)~~<br>hybrid 最大好处,无需审核就可更新….<br>通过 webview 与 file 协议实现(就是本地拿文件)<br><br><br>如何更新:<br>服务端需要维护一个 zip 版本管理工具<br>app 主动请求服务端 web 包的版本号,如果有新的就更新一下,没有就算了~<br>下载下来就把本地老包覆盖了~<br><br></p>
<p>如何与客户端通信—schema 协议</p>
<p>跟 jsonp 特别像,下面一个傻瓜式封装函数,把这个文件内置到客户端,启动 webview 默认执行,调用就行,记得和客户端约定好调用后的逻辑~~返回内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 调用 schema 的封装</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_invoke</span>(<span class="params">action, data, callback</span>) </span>{</span><br><span class="line"> <span class="comment">// 拼装 schema 协议</span></span><br><span class="line"> <span class="keyword">var</span> schema = <span class="string">'myapp://utils/'</span> + action</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 拼接参数</span></span><br><span class="line"> schema += <span class="string">'?a=a'</span></span><br><span class="line"> <span class="keyword">var</span> key = <span class="built_in">Object</span>.keys(data)</span><br><span class="line"> key.forEach(<span class="function"><span class="params">e</span> =></span>{</span><br><span class="line"> schema += <span class="string">'&'</span> + e + <span class="string">'='</span> + data[e]</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 处理 callback</span></span><br><span class="line"> <span class="keyword">var</span> callbackName = <span class="string">''</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> callback === <span class="string">'string'</span>) {</span><br><span class="line"> <span class="comment">// 全局已经有了这个函数 传入了一个函数名称</span></span><br><span class="line"> callbackName = callback</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 传入了一个函数 ,全局注册一下这个函数</span></span><br><span class="line"> callbackName = action + <span class="built_in">Date</span>.now()</span><br><span class="line"> <span class="built_in">window</span>[callbackName] = callback</span><br><span class="line"> }</span><br><span class="line"> schema +=<span class="string">'&'</span>+ <span class="string">'callback='</span> + callbackName</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 触发通信</span></span><br><span class="line"> <span class="keyword">var</span> iframe = <span class="built_in">document</span>.createElement(<span class="string">'iframe'</span>)</span><br><span class="line"> iframe.style.display = <span class="string">'none'</span></span><br><span class="line"> iframe.src = schema </span><br><span class="line"> <span class="keyword">var</span> body = <span class="built_in">document</span>.body</span><br><span class="line"> body.appendChild(iframe)</span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> body.removeChild(iframe)</span><br><span class="line"> iframe = <span class="literal">null</span></span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 暴露到全局变量一些方法</span></span><br><span class="line"><span class="built_in">window</span>.invoke = {</span><br><span class="line"> share: <span class="function"><span class="keyword">function</span> (<span class="params">data, callback</span>) </span>{</span><br><span class="line"> _invoke(<span class="string">'share'</span>, data, callback)</span><br><span class="line"> },</span><br><span class="line"> scan: <span class="function"><span class="keyword">function</span> (<span class="params">data, callback</span>) </span>{</span><br><span class="line"> _invoke(<span class="string">'scan'</span>, data, callback)</span><br><span class="line"> }</span><br><span class="line"> login: <span class="function"><span class="keyword">function</span> (<span class="params">data, callback</span>) </span>{</span><br><span class="line"> _invoke(<span class="string">'login'</span>, data, callback)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">invoke.share({</span><br><span class="line"> name:<span class="string">'xc'</span>,</span><br><span class="line"> age:<span class="string">'1'</span></span><br><span class="line">},()=>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hahah'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于前端优化]]></title>
<url>/2018/04/27/%E5%85%B3%E4%BA%8E%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/</url>
<content type="html"><![CDATA[<p>身为强迫症,要对自己写的代码负责,所以了解一下前端优化是有必要的~~~</p>
<a id="more"></a>
<ol>
<li><p>文件压缩与合并<br>html css js 压缩 文件合并 gzip 压缩(<code>webpack</code>构建工具了解一下)<br>主要减少 http 请求数,文件大小的方式优化</p>
</li>
<li><p>图片压缩<br>一种是雪碧图,核心也是减少 http 请求数<br>一种就是压缩图片大小,这里推荐一个压缩工具<a href="http://compressjpeg.com/zh/" target="_blank" rel="noopener">图片压缩</a></p>
</li>
<li><p>文件加载和懒加载和预加载<br>(注意:同一个 cdn 最大请求数有限制,所以有些情况会同时存在几个 cdn 用来分发资源文件)<br>css 阻塞页面渲染,所以放在 head 里面<br>如果 js 操作 dom,需要放在前面,方面 dom 操作<br>图片等资源如果数量巨大(常见电商网站),图片在进入可视区域以后再开始加载即懒加载<br>一些页面为了保证流畅度(比如用了大量图片的 h5 活动页),需要等资源全部加载结束后再开始渲染,即预加载</p>
</li>
</ol>
<p>4) 重绘与回流<br> 回流: 触发页面重布局(消耗很大)<br> 重绘: 不改变布局,只改变样式,比如颜色(消耗小)<br> 优化点:</p>
<ul>
<li>尽量减少会引起回流的操作,限制回流在一个<strong>图层</strong>中</li>
<li>使用 translate 替代 top 操作</li>
<li>使用 opacity 替代 visibility</li>
<li>不要一条条改变 css,而是封装成 className 整体替换</li>
<li>复杂的操作先将 dom 结构 display:none 然后操作后显示</li>
</ul>
<ol>
<li><p>游览器储存<br>cookie cdn 的域名和主站的域名要分开,避免请求 cdn 携带 cookie 的流量损耗<br>Worker 可以把非常耗费性能的操作放在 worker 里运行,防止 js 堵塞</p>
</li>
<li><p>游览器缓存(主要是通过服务端设置)<br>cache-control</p>
<ul>
<li>max-age 服务端设置最大有效时间(直接游览器缓存拿)</li>
<li>s-maxage 最大有效时间(public private 公共还是私有 no-cache 不缓存 no-store)</li>
<li>expores 等同于 max-age,权重低于它<br>缓存验证</li>
<li>last-modified 与 if-midified-since 与服务端协商的一个过期时间(需要请求服务端确认是缓存还是新文件 304 缓存 200 新文件)</li>
<li>eTag 文件 hash 值 等同于 last-modified 更准确的缓存策略</li>
</ul>
</li>
<li><p>服务端优化<br>首屏加载问题通过服务端渲染 ssr 解决(要考量平衡服务端与客户端的计算能力)</p>
</li>
</ol>
]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> js </tag>
</tags>
</entry>
<entry>
<title><![CDATA[我的程序员入门手册]]></title>
<url>/2018/04/01/%E6%88%91%E7%9A%84%E7%A8%8B%E5%BA%8F%E5%91%98%E5%85%A5%E9%97%A8%E6%89%8B%E5%86%8C/</url>
<content type="html"><![CDATA[<p>哈哈,偶尔看到我入行程序员的时候写的一个笔记,见证了我的成长,感觉挺有纪念意义的,就整理一下搬过来吧~~~~</p>
<a id="more"></a>
<h3 id="视频音频标签"><a href="#视频音频标签" class="headerlink" title="视频音频标签"></a>视频音频标签</h3><p>带控制器的视频标签, 不同浏览器有不同的文件格式要求<br>所以用 2 个 source 标签指定不同的视频格式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">width</span>=<span class="string">"300"</span> <span class="attr">height</span>=<span class="string">"200"</span> <span class="attr">controls</span>=<span class="string">"controls"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"movie.mp4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"movie.ogv"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">video</span>></span></span><br></pre></td></tr></table></figure>
<p>带控制器的音频标签, 不同浏览器有不同的文件格式要求<br>所以用 2 个 source 标签指定不同的音频格式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">audio</span> <span class="attr">id</span>=<span class="string">'id-audio-player'</span> <span class="attr">controls</span>=<span class="string">"controls"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"audio.ogg"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"audio.mp3"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">audio</span> ></span></span><br></pre></td></tr></table></figure>
<p>audio 基本操作如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">document</span>.querySelector(<span class="string">'#id-audio-player'</span>)</span><br><span class="line">a.play() <span class="comment">//播放</span></span><br><span class="line">a.pause() <span class="comment">//暂停</span></span><br><span class="line">a.autoplay <span class="comment">//自动播放 (设为true)</span></span><br><span class="line">a.src <span class="comment">//链接音频文件</span></span><br><span class="line">a.volume <span class="comment">//音量（0-1之间的数）</span></span><br><span class="line">a.duration <span class="comment">//音频时间长度</span></span><br><span class="line">a.currentTime = <span class="number">1</span> <span class="comment">//现在播放第几s（设置）</span></span><br><span class="line">a.playbackRate <span class="comment">// 播放速率, 默认是 1</span></span><br></pre></td></tr></table></figure>
<hr>
<h3 id="移动端设置"><a href="#移动端设置" class="headerlink" title="移动端设置"></a>移动端设置</h3><p>设置 viewport<br>viewport 是 html 的父元素<br>在手机上需要用下面的语句设置它的尺寸</p>
<blockquote>
<p><strong>网易移动端模板</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="actionscript"><span class="comment">//设置rem</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.documentElement.style.fontSize = <span class="built_in">document</span>.documentElement.clientWidth / <span class="number">7.5</span>(iPhone6相对宽度) + <span class="string">'px'</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript"><span class="comment">//通过设计图宽度 / 100 来得出相对宽度 rem</span></span></span><br><span class="line"><span class="actionscript"><span class="comment">//比如iphone5 设计图宽度640 相对宽度 6.4</span></span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">width=device-width</td>
<td style="text-align:left">宽度等于设备宽度</td>
</tr>
<tr>
<td style="text-align:left">height=device-height</td>
<td style="text-align:left">高度等于设备宽度</td>
</tr>
<tr>
<td style="text-align:left">initial-scale</td>
<td style="text-align:left">初始缩放比例</td>
</tr>
<tr>
<td style="text-align:left">minimum-scale</td>
<td style="text-align:left">允许用户缩放的最小比例</td>
</tr>
<tr>
<td style="text-align:left">maximum-scale</td>
<td style="text-align:left">允许用户缩放的最大比例</td>
</tr>
<tr>
<td style="text-align:left">user-scalable</td>
<td style="text-align:left">是否允许用户缩放</td>
</tr>
</tbody>
</table>
<hr>
<p>###媒体查询-响应式开发<br>响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式<br>媒体查询主要用来:</p>
<ul>
<li>检测媒体的类型, 比如 screen, tv 等</li>
<li>检测布局视口的特性, 比如视口的宽高分辨率等</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="css">@<span class="keyword">media</span> all and (min-width: <span class="number">200px</span>) and (max-width: <span class="number">300px</span>){</span></span><br><span class="line"><span class="undefined"> body {</span></span><br><span class="line"><span class="undefined"> background: red;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined">}</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">//网易移动端字体设置</span></span><br><span class="line"><span class="css">@<span class="keyword">media</span> screen and (max-width: <span class="number">321px</span>) {</span></span><br><span class="line"><span class="undefined"> body {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:16px</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined">}</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">@<span class="keyword">media</span> screen and (min-width: <span class="number">321px</span>) and (max-width:<span class="number">400px</span>) {</span></span><br><span class="line"><span class="undefined"> body {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:17px</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined">}</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">@<span class="keyword">media</span> screen and (min-width: <span class="number">400px</span>) {</span></span><br><span class="line"><span class="undefined"> body {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">font-size</span><span class="selector-pseudo">:19px</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined">}</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>上面代码中, all 是媒体类型, 代表任何设备<br>and 是逻辑操作<br>意思是, 对于任何设备, 在宽度在 200-300 的范围内应用这个样式</p>
<hr>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a><a href="http://www.w3school.com.cn/cssref/index.asp" target="_blank" rel="noopener">CSS</a></h1><hr>
<h4 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h4><blockquote>
<p>举例：< <code>h1</code> id=”<code>id-h1</code>“ class=”<code>class-h1</code>“> 琉璃 < /h1 ><br>一切标签都可被选择包括 html, style 等</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align:center">元素 选择器</th>
<th style="text-align:center">符号</th>
<th style="text-align:right">优先级 从高到低</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">!important</td>
<td style="text-align:center">!</td>
<td style="text-align:right">h1 { color: red <code>!important</code>; }</td>
</tr>
<tr>
<td style="text-align:center">id</td>
<td style="text-align:center">#</td>
<td style="text-align:right"><code>#id-h1</code> { color: red; }</td>
</tr>
<tr>
<td style="text-align:center">class</td>
<td style="text-align:center">.</td>
<td style="text-align:right"><code>.class-h1</code> { color: red; }</td>
</tr>
<tr>
<td style="text-align:center">标签</td>
<td style="text-align:center">无</td>
<td style="text-align:right"><code>h1</code> { color: red; }</td>
</tr>
</tbody>
</table>
<hr>
<table>
<thead>
<tr>
<th style="text-align:center">定义</th>
<th style="text-align:right">优先级 从高到低</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">!</td>
<td style="text-align:right">!important</td>
</tr>
<tr>
<td style="text-align:center">内联</td>
<td style="text-align:right">禁止使用 < h1 <code>~~style="color: red;"~~</code> > Hello World < /h1 ></td>
</tr>
<tr>
<td style="text-align:center">中联</td>
<td style="text-align:right">< style > <code>h1{ color: red; }</code> < /style ></td>
</tr>
<tr>
<td style="text-align:center">外联</td>
<td style="text-align:right">< link rel=”stylesheet” href=”<code>tag.css</code>“ ></td>
</tr>
</tbody>
</table>
<h4 id="常用"><a href="#常用" class="headerlink" title="常用"></a>常用</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">background</span>: lightblue; <span class="comment">/* 背景色 */</span></span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0px</span>; <span class="comment">/* 外边距 */</span></span><br><span class="line"> <span class="attribute">border</span>:<span class="number">0px</span>; <span class="comment">/* 边框 */</span></span><br><span class="line"> <span class="attribute">border-style</span>: solid; <span class="comment">/* 边框样式 */</span></span><br><span class="line"> <span class="attribute">padding</span>:<span class="number">0px</span>; <span class="comment">/* 内边距 */</span></span><br><span class="line"> <span class="attribute">font-family</span>: Microsoft YaHei; <span class="comment">/* 字体 */</span></span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">22px</span>; <span class="comment">/* 字体大小 */</span></span><br><span class="line"> <span class="attribute">text-align</span>: center; <span class="comment">/* 对齐 */</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.tanChuang</span> {</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">100</span>; <span class="comment">/* 顶层 */</span></span><br><span class="line"> <span class="attribute">position</span>: fixed; <span class="comment">/* 定位 */</span></span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0px</span>; <span class="comment">/* 顶部 */</span></span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0px</span>; <span class="comment">/* 左部 */</span></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0.96</span>; <span class="comment">/* 透明度 */</span></span><br><span class="line"> <span class="attribute">background</span>: black;</span><br><span class="line"> <span class="attribute">color</span>: white;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.tanCenter</span> {</span><br><span class="line"> <span class="attribute">position</span>:relative;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-61.8%); <span class="comment">/* Y轴距离 */</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.circle</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>; <span class="comment">/* 圆角 */</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">background</span> 相关属性和缩写</span><br><span class="line"> <span class="selector-tag">background-color</span>: <span class="selector-id">#233</span>;</span><br><span class="line"> <span class="selector-tag">background-image</span>: <span class="selector-tag">url</span>(<span class="selector-tag">bg</span><span class="selector-class">.png</span>);</span><br><span class="line"> <span class="selector-tag">background-repeat</span>: <span class="selector-tag">no-repeat</span>;</span><br><span class="line"> <span class="selector-tag">background-attachment</span>: <span class="selector-tag">fixed</span>; 背景图片随滚动轴移动方式</span><br><span class="line"> <span class="selector-tag">background</span>: <span class="selector-id">#233</span> <span class="selector-tag">url</span>(<span class="selector-tag">bg</span><span class="selector-class">.png</span>) <span class="selector-tag">no-repeat</span>;</span><br><span class="line"></span><br><span class="line">三种缩写, 分别对应有 4 2 3 个值的时候的解释, <span class="selector-tag">padding</span> 同理</span><br><span class="line"><span class="selector-tag">margin</span>: <span class="selector-tag">top</span> <span class="selector-tag">right</span> <span class="selector-tag">bottom</span> <span class="selector-tag">left</span></span><br><span class="line">margin: (top/bottom) (right/left)</span><br><span class="line">margin: top (right/left) bottom</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">overflow</span>属性</span><br><span class="line"> <span class="selector-tag">visible</span> 默认</span><br><span class="line"> <span class="selector-tag">auto</span> 需要的时候加滚动条</span><br><span class="line"> <span class="selector-tag">hidden</span> 隐藏多余元素</span><br><span class="line"> <span class="selector-tag">scroll</span> 就算用不着也会强制加滚动条</span><br></pre></td></tr></table></figure>
<blockquote>
<p>内联元素 居中 text-align: center<br>区块元素 居中 margin: 0px auto;</p>
</blockquote>
<h4 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a><a href="http://www.w3school.com.cn/css/css_pseudo_classes.asp" target="_blank" rel="noopener">伪类</a></h4><table>
<thead>
<tr>
<th style="text-align:center">:link</th>
<th style="text-align:center">未访问</th>
<th style="text-align:center">:hover</th>
<th style="text-align:center">悬停</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><strong>:visited</strong></td>
<td style="text-align:center"><strong>已访问</strong></td>
<td style="text-align:center"><strong>:active</strong></td>
<td style="text-align:center"><strong>选定</strong></td>
</tr>
</tbody>
</table>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> { <span class="attribute">color</span>: white; <span class="attribute">text-decoration</span>: none; } <span class="comment">/*去下划线*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span>{ <span class="attribute">color</span>: black; }</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> { <span class="attribute">color</span>: red; <span class="attribute">cursor</span>: pointer; } <span class="comment">/*鼠标样式*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> { <span class="attribute">color</span>: lightblue; }</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.class</span><span class="selector-pseudo">:visited</span> {<span class="attribute">color</span>: white;} <span class="comment">/* 独立伪类 */</span></span><br></pre></td></tr></table></figure>
<h4 id="定位-position"><a href="#定位-position" class="headerlink" title="定位 position"></a>定位 <a href="http://www.w3school.com.cn/cssref/pr_class_position.asp" target="_blank" rel="noopener">position</a></h4><table>
<thead>
<tr>
<th style="text-align:left">值</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">static</td>
<td style="text-align:left">默认 <code>static</code></td>
</tr>
<tr>
<td style="text-align:left">relative</td>
<td style="text-align:left">相对定位 可相对自身偏移</td>
</tr>
<tr>
<td style="text-align:left">absolute</td>
<td style="text-align:left">完全绝对定位, 忽略其他所有东西, 往上浮动到 非 static 的元素</td>
</tr>
<tr>
<td style="text-align:left">fixed</td>
<td style="text-align:left">基于 <code>window</code> 的绝对定位, 不随页面滚动改变</td>
</tr>
</tbody>
</table>
<blockquote>
<p>非 static 元素可以用 top left bottom right 属性来设置坐标<br>非 static 元素可以用 z-index 属性来设置显示层次<br>e.pageX——相对整个页面的坐标<br>e.clientX——相对可视区域的坐标<br>e.offsetX——相对当前坐标系的 border 左上角开始的坐标</p>
</blockquote>
<h4 id="布局-flex"><a href="#布局-flex" class="headerlink" title="布局 flex"></a>布局 <a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noopener">flex</a></h4><table>
<thead>
<tr>
<th style="text-align:left">容器的属性</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>flex-direction</code>:row</td>
<td style="text-align:left">属性决定主轴的方向（即项目的排列方向</td>
</tr>
<tr>
<td style="text-align:left">row,row-reverse</td>
<td style="text-align:left">主轴为水平方向，起点在左(右)端</td>
</tr>
<tr>
<td style="text-align:left">column,column-reverse</td>
<td style="text-align:left">主轴为垂直方向，起点在上(下)沿</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-wrap</code>:nowrap</td>
<td style="text-align:left">定义如果一条轴线排不下如何换行,默认不换行</td>
</tr>
<tr>
<td style="text-align:left">wrap,wrap-reverse</td>
<td style="text-align:left">换行，第一行在上(下)方</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-flow</code></td>
<td style="text-align:left"><code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code></td>
</tr>
<tr>
<td style="text-align:left"><code>justify-content</code></td>
<td style="text-align:left">属性定义了项目在主轴上的对齐方式</td>
</tr>
<tr>
<td style="text-align:left">flex-start,flex-end</td>
<td style="text-align:left">左对齐(默认),右对齐</td>
</tr>
<tr>
<td style="text-align:left">center,space-between</td>
<td style="text-align:left">居中,两端对齐，项目之间的间隔都相等</td>
</tr>
<tr>
<td style="text-align:left">space-around</td>
<td style="text-align:left">每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍</td>
</tr>
<tr>
<td style="text-align:left"><code>align-items</code></td>
<td style="text-align:left">属性定义项目在交叉轴上如何对齐</td>
</tr>
<tr>
<td style="text-align:left">stretch</td>
<td style="text-align:left">(默认值)如果项目未设置高度或设为 auto，将占满整个容器的高度</td>
</tr>
<tr>
<td style="text-align:left">flex-start,flex-end</td>
<td style="text-align:left">交叉轴的起(终)点对齐</td>
</tr>
<tr>
<td style="text-align:left">center,baseline</td>
<td style="text-align:left">交叉轴的中点对齐,项目的第一行文字的基线对齐</td>
</tr>
<tr>
<td style="text-align:left"><code>align-content</code></td>
<td style="text-align:left">定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用</td>
</tr>
<tr>
<td style="text-align:left">flex-start,flex-end</td>
<td style="text-align:left">与交叉轴的起(终)点对齐</td>
</tr>
<tr>
<td style="text-align:left">center</td>
<td style="text-align:left">与交叉轴的中点对齐</td>
</tr>
<tr>
<td style="text-align:left">space-between</td>
<td style="text-align:left">与交叉轴两端对齐，轴线之间的间隔平均分布</td>
</tr>
<tr>
<td style="text-align:left">space-around</td>
<td style="text-align:left">每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍</td>
</tr>
<tr>
<td style="text-align:left">stretch（默认值)</td>
<td style="text-align:left">轴线占满整个交叉轴</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">项目的属性</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>order</code>:0</td>
<td style="text-align:left">定义项目的排列顺序。数值越小排列越靠前，默认为 0</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-grow</code>:0</td>
<td style="text-align:left">定义项目的放大比例，默认 0 即如果存在剩余空间，也不放大</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-grow</code>:1</td>
<td style="text-align:left">属性都为 1，则它们将等分剩余空间（如果有的话）</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-grow</code>:2</td>
<td style="text-align:left">如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-shrink</code>:1</td>
<td style="text-align:left">定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-shrink</code>:0</td>
<td style="text-align:left">如果一个项目的属性为 0，其他项目都为 1，则空间不足时，前者不缩小,负值无效</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-basis</code>:auto</td>
<td style="text-align:left">定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小</td>
</tr>
<tr>
<td style="text-align:left"><code>flex-basis</code>:350px</td>
<td style="text-align:left">可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间</td>
</tr>
<tr>
<td style="text-align:left"><code>flex</code></td>
<td style="text-align:left">是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</td>
</tr>
<tr>
<td style="text-align:left"><code>flex</code>:auto,none</td>
<td style="text-align:left">默认值分别是(1 1 auto) 和 (0 0 auto)</td>
</tr>
<tr>
<td style="text-align:left"><code>align-self</code>:auto</td>
<td style="text-align:left">允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为<code>auto</code>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>.该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致</td>
</tr>
</tbody>
</table>
<h4 id="显示-display"><a href="#显示-display" class="headerlink" title="显示 display"></a>显示 <a href="http://www.w3school.com.cn/cssref/pr_class_display.asp" target="_blank" rel="noopener">display</a></h4><table>
<thead>
<tr>
<th style="text-align:left">值</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">none</td>
<td style="text-align:left">不显示</td>
</tr>
<tr>
<td style="text-align:left">block</td>
<td style="text-align:left">独占一行(默认有<code>div p ul ol li h1 h2 h3 h4 h5 h6</code>)</td>
</tr>
<tr>
<td style="text-align:left">inline</td>
<td style="text-align:left">内联元素 无法设置宽高</td>
</tr>
<tr>
<td style="text-align:left">inline-block</td>
<td style="text-align:left">内联元素 可以设置宽高</td>
</tr>
</tbody>
</table>
<h4 id="盒模型"><a href="#盒模型" class="headerlink" title="盒模型"></a><a href="http://www.w3school.com.cn/css/css_boxmodel.asp" target="_blank" rel="noopener">盒模型</a></h4><table>
<thead>
<tr>
<th style="text-align:left">BOX</th>
<th style="text-align:left">单位</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">margin:</td>
<td style="text-align:left">0px;</td>
<td style="text-align:left">外边距</td>
</tr>
<tr>
<td style="text-align:left">border:</td>
<td style="text-align:left">0px;</td>
<td style="text-align:left">边框</td>
</tr>
<tr>
<td style="text-align:left">padding:</td>
<td style="text-align:left">0px;</td>
<td style="text-align:left">内边距</td>
</tr>
<tr>
<td style="text-align:left">width:</td>
<td style="text-align:left">80% or 0px;</td>
<td style="text-align:left">宽</td>
</tr>
<tr>
<td style="text-align:left">height:</td>
<td style="text-align:left">100% or 0px;</td>
<td style="text-align:left">高</td>
</tr>
</tbody>
</table>
<p>###动画</p>
<table>
<thead>
<tr>
<th style="text-align:center">动画</th>
<th style="text-align:right">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">transform</td>
<td style="text-align:right">2D 变形</td>
</tr>
<tr>
<td style="text-align:center"><a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" target="_blank" rel="noopener">transition</a></td>
<td style="text-align:right">css 动画(运动时间,运动对象,运动速度,等待时间)</td>
</tr>
<tr>
<td style="text-align:center"><a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" target="_blank" rel="noopener">animation</a></td>
<td style="text-align:right">多过程动画效果(具体看链接)</td>
</tr>
</tbody>
</table>
<hr>
<h1 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a><a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000" target="_blank" rel="noopener">JavaScript</a></h1><table>
<thead>
<tr>
<th style="text-align:center">定义</th>
<th style="text-align:right">插入 < /body > 之前 顺序执行</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">中联</td>
<td style="text-align:right">< script ><code>log('Hello World!')</code>< /script ></td>
</tr>
<tr>
<td style="text-align:center">外联</td>
<td style="text-align:right">< script src=”<code>Echo.js</code>“ charset=”utf-8”>< /script ></td>
</tr>
</tbody>
</table>
<h4 id="Array-数组"><a href="#Array-数组" class="headerlink" title="Array 数组"></a><strong>Array</strong> <a href="http://www.w3school.com.cn/jsref/jsref_obj_array.asp" target="_blank" rel="noopener">数组</a></h4><table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">秒懂释义</th>
<th style="text-align:left">相当于</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>slice( )</strong></td>
<td style="text-align:left">复制 切片并返回</td>
<td style="text-align:left">支持负索引</td>
</tr>
<tr>
<td style="text-align:left"><strong>splice(开始,长度,元素)</strong></td>
<td style="text-align:left">删除插入并返回</td>
<td style="text-align:left">开始的地方插入</td>
</tr>
<tr>
<td style="text-align:left">concat( array )</td>
<td style="text-align:left">连接 数组</td>
</tr>
<tr>
<td style="text-align:left">includes( str[ ] )</td>
<td style="text-align:left">检查 是否包含 str[ ] 返回 bool</td>
</tr>
<tr>
<td style="text-align:left">indexOf()</td>
<td style="text-align:left">返回元素第一次在数组中出现的位置,无返回-1</td>
</tr>
<tr>
<td style="text-align:left">length</td>
<td style="text-align:left">返回长度</td>
<td style="text-align:left">长度可设置以清空</td>
</tr>
<tr>
<td style="text-align:left">push( )</td>
<td style="text-align:left">末尾 添加元素</td>
<td style="text-align:left">push(1,2,[1,2])</td>
</tr>
<tr>
<td style="text-align:left">unshift( )</td>
<td style="text-align:left">头部 添加元素</td>
</tr>
<tr>
<td style="text-align:left">pop( )</td>
<td style="text-align:left">尾部 删除<strong>一个</strong>元素</td>
</tr>
<tr>
<td style="text-align:left">shift( )</td>
<td style="text-align:left">头部 删除<strong>一个</strong>元素</td>
</tr>
<tr>
<td style="text-align:left">join( str )</td>
<td style="text-align:left">返回 字符串 str 分隔</td>
</tr>
<tr>
<td style="text-align:left">reverse( )</td>
<td style="text-align:left">翻转 所有元素</td>
</tr>
<tr>
<td style="text-align:left">sort( )</td>
<td style="text-align:left">排序函数(需提供排序方式函数)</td>
</tr>
<tr>
<td style="text-align:left">map()</td>
<td style="text-align:left">参数是函数,返回一个新数组</td>
</tr>
<tr>
<td style="text-align:left">filter()</td>
<td style="text-align:left">参数是一个过滤函数,返回符合条件的新数组</td>
</tr>
<tr>
<td style="text-align:left">toString()</td>
<td style="text-align:left">返回数组的字符串形式</td>
</tr>
</tbody>
</table>
<h4 id="Str-字符串"><a href="#Str-字符串" class="headerlink" title="Str 字符串"></a><strong>Str</strong> <a href="http://www.w3school.com.cn/jsref/jsref_obj_string.asp" target="_blank" rel="noopener">字符串</a></h4><table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>slice( )</strong></td>
<td style="text-align:left">返回 切片</td>
</tr>
<tr>
<td style="text-align:left">if( <code>==</code> )</td>
<td style="text-align:left">判断相等需要双等号</td>
</tr>
<tr>
<td style="text-align:left">includes( str )</td>
<td style="text-align:left">检查 是否包含 str 返回 bool</td>
</tr>
<tr>
<td style="text-align:left">split( str )</td>
<td style="text-align:left">以 str 分割字符串 返回 array</td>
</tr>
<tr>
<td style="text-align:left">toLowerCase()</td>
<td style="text-align:left">字母转小写</td>
</tr>
<tr>
<td style="text-align:left">toUpperCase()</td>
<td style="text-align:left">字母转大写</td>
</tr>
<tr>
<td style="text-align:left">indexOf( str )</td>
<td style="text-align:left">查找 是否包含 str 返回 下标</td>
</tr>
<tr>
<td style="text-align:left">match( str )</td>
<td style="text-align:left">整个匹配结果以及任何括号捕获的匹配结果的 Array,没有就返回 null</td>
</tr>
<tr>
<td style="text-align:left">replace( pattern, str )</td>
<td style="text-align:left">替换 pattern 为 str ；/pattern/g 全部替换</td>
</tr>
<tr>
<td style="text-align:left">search( <a href="#regexp-正则表达式">pattern</a> )</td>
<td style="text-align:left">查找 pattern 返回下标 否则返回 -1</td>
</tr>
</tbody>
</table>
<h4 id="Object-字典"><a href="#Object-字典" class="headerlink" title="Object 字典"></a><strong>Object</strong> 字典</h4><blockquote>
<p><code>dict</code> = { ‘初中生’:6, ‘高中生’:7, ‘大学生’:8 }<br>|属性|说明<br>|:-|:-|<br>| <code>dict</code> = { key : ‘value’, }|创建<br>|<code>dict.(key)</code> |点语法读取|<br>|<code>dict</code> [‘小学生’] = 4| 添加<br>|<code>dict</code> [‘小学生’] = 5| 修改<br>|delete <code>dict</code> [‘大学生’]| 删除<br>|Object.keys( <code>dict</code> )| 返回 keys</p>
</blockquote>
<h4 id="类"><a href="#类" class="headerlink" title="类"></a>类</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Student = <span class="function"><span class="keyword">function</span>(<span class="params">name, height</span>) </span>{</span><br><span class="line"> <span class="comment">// 用 this.变量名 来创造一个只有类的实例才能访问的变量</span></span><br><span class="line"> <span class="keyword">this</span>.name = name</span><br><span class="line"> <span class="keyword">this</span>.height = height</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 用 new 函数名(参数) 初始化一个类的实例</span></span><br><span class="line"><span class="keyword">var</span> s1 = <span class="keyword">new</span> Student(<span class="string">'gua'</span>, <span class="number">169</span>)</span><br><span class="line"><span class="comment">// 可以改变 s1 的属性</span></span><br><span class="line">s1.name = <span class="string">'xiaogua'</span></span><br><span class="line">s1.height = <span class="number">1.69</span></span><br><span class="line"><span class="comment">// 可以创建多个互相独立的实例</span></span><br><span class="line"><span class="keyword">var</span> s2 = <span class="keyword">new</span> Student()</span><br><span class="line"><span class="keyword">var</span> s3 = <span class="keyword">new</span> Student()</span><br><span class="line"><span class="comment">//可以给类增加一些方法(函数)</span></span><br><span class="line">Student.prototype.greeting = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`hello, I'm <span class="subst">${<span class="keyword">this</span>.name}</span>`</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 可以调用实例的方法</span></span><br><span class="line">s1.greeting()</span><br><span class="line"></span><br><span class="line">ES6类的表示方法</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Student</span> </span>{</span><br><span class="line"> <span class="comment">// 初始化的套路</span></span><br><span class="line"> <span class="keyword">constructor</span>(name, height) {</span><br><span class="line"> <span class="keyword">this</span>.name = name</span><br><span class="line"> <span class="keyword">this</span>.height = height</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 方法没有 var</span></span><br><span class="line"> greeting() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`hello, I'm <span class="subst">${<span class="keyword">this</span>.name}</span>`</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> update(name, age) {</span><br><span class="line"> <span class="keyword">this</span>.name = name</span><br><span class="line"> <span class="keyword">this</span>.age = age</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Teacher</span> <span class="keyword">extends</span> <span class="title">Student</span> </span>{</span><br><span class="line"> <span class="comment">//继承类的用法</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>####this</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">apply call bind <span class="comment">//是用来给函数指定 this 用的</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">apply 接受两个参数</span><br><span class="line">第一个参数是函数里面的 <span class="keyword">this</span></span><br><span class="line">第二个参数是要传给函数的参数列表, 类型是 数组(暂定), apply 会把数组拆成一个个的参数传给函数</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log.apply(<span class="built_in">console</span>, <span class="built_in">arguments</span>) <span class="comment">//直接用</span></span><br><span class="line"></span><br><span class="line">call 和 apply 类似, 但是小有区别, 如下</span><br><span class="line">第一个参数和 apply 一样</span><br><span class="line">第 <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, ... 个参数会依次作为参数传给函数</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log.call(<span class="built_in">console</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>) <span class="comment">//直接用</span></span><br><span class="line"></span><br><span class="line">bind 函数<span class="comment">/*不直接调用*/</span>, 而是返回一个函数让你来调用</span><br><span class="line">第一个参数是用来指定函数里面的 <span class="keyword">this</span>, 和 apply call 一样</span><br><span class="line"><span class="keyword">var</span> log = <span class="built_in">console</span>.log.bind(<span class="built_in">console</span>) <span class="comment">//不直接用</span></span><br><span class="line">log() <span class="comment">//才可调用</span></span><br></pre></td></tr></table></figure>
<h4 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h4><table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">let</td>
<td style="text-align:left">就是<code>限制作用域在 {}</code> 内的 var</td>
</tr>
<tr>
<td style="text-align:left">const</td>
<td style="text-align:left">用来声明一个<code>不可赋值的变量</code>,也是限制作用域在 {} 内的 var</td>
</tr>
<tr>
<td style="text-align:left">Set</td>
<td style="text-align:left">和 <code>Array</code> 相似的数据结构不同之处在于 <code>Set 中的元素都是不重复的</code></td>
</tr>
<tr>
<td style="text-align:left">Set</td>
<td style="text-align:left"><code>var s = new Set()</code> add 方法添加元素<code>s.add(1)</code></td>
</tr>
<tr>
<td style="text-align:left">Set</td>
<td style="text-align:left">has 方法检查元素是否在 set 中 <code>s.has(1) => true</code></td>
</tr>
<tr>
<td style="text-align:left">Set</td>
<td style="text-align:left">size 属性相当于 length <code>s.size => 2</code></td>
</tr>
<tr>
<td style="text-align:left">Set</td>
<td style="text-align:left">delete 方法删除一个元素<code>s.delete(1)</code></td>
</tr>
<tr>
<td style="text-align:left">Map</td>
<td style="text-align:left"><code>Object</code>相似 <code>var m = new Map()</code></td>
</tr>
<tr>
<td style="text-align:left">Map</td>
<td style="text-align:left">set 方法增加一个值<code>m.set('name', 'gua')</code></td>
</tr>
<tr>
<td style="text-align:left">Map</td>
<td style="text-align:left">get 属性得到一个值<code>m.get('name')</code></td>
</tr>
<tr>
<td style="text-align:left">…</td>
<td style="text-align:left">叫扩展符号, 作用是把数组解开成单独的元素</td>
</tr>
<tr>
<td style="text-align:left">…</td>
<td style="text-align:left"><code>var a1 = [1, 2, 3]</code> <code>var a2 = [...a1, 4]</code> => <code>[1, 2, 3, 4]</code></td>
</tr>
<tr>
<td style="text-align:left">…</td>
<td style="text-align:left">也可以传参<code>var a1 = [1, 2, 3]</code> <code>log(...a1) =></code> <code>'1,2,3'</code></td>
</tr>
<tr>
<td style="text-align:left">…</td>
<td style="text-align:left">语法可以实现可变长度的参数, 多余的参数会被放进 args 数组中</td>
</tr>
<tr>
<td style="text-align:left">…</td>
<td style="text-align:left"><code>var foo = function(a, ...args) {log(a, args.length)}</code> <code>foo(1, 2, 3, 4)</code></td>
</tr>
<tr>
<td style="text-align:left">解包</td>
<td style="text-align:left"><code>var [a, b] = [1, 2]</code> <code>[a, b] = [b, a]</code></td>
</tr>
<tr>
<td style="text-align:left">箭头</td>
<td style="text-align:left"><code>(参数1, 参数2) => 语句</code> <code>function(参数1, 参数2) {return 语句}</code></td>
</tr>
</tbody>
</table>
<h4 id="Json-格式"><a href="#Json-格式" class="headerlink" title="Json 格式"></a><strong>Json</strong> 格式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="built_in">JSON</span>.stringify( [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] ) <span class="comment">//编译</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> y = <span class="built_in">JSON</span>.parse( x ) <span class="comment">//读取</span></span><br></pre></td></tr></table></figure>
<h4 id="Promise-处理回调的方法"><a href="#Promise-处理回调的方法" class="headerlink" title="Promise 处理回调的方法"></a><strong>Promise</strong> 处理回调的方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 将 fs.readFile 的操作封装成 promise，这样就可以使用 promise 的 api 了</span></span><br><span class="line"><span class="keyword">const</span> readFile = <span class="function"><span class="keyword">function</span>(<span class="params">filename</span>) </span>{</span><br><span class="line"> <span class="comment">// 一般前端的写法</span></span><br><span class="line"> <span class="comment">// return new Promise(function(resolve, reject) {})</span></span><br><span class="line"> <span class="keyword">const</span> p = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>)</span><br><span class="line"> <span class="keyword">const</span> options = {</span><br><span class="line"> encoding: <span class="string">'utf8'</span>,</span><br><span class="line"> }</span><br><span class="line"> fs.readFile(filename, options, <span class="function"><span class="keyword">function</span>(<span class="params">error, content</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (error !== <span class="literal">null</span>) {</span><br><span class="line"> reject(error)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(content)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> p</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 使用 promise 读取文件就不用写成回调的形式了</span></span><br><span class="line"><span class="comment">// 直接按照同步的写法就好了</span></span><br><span class="line"><span class="comment">// 可以无限 then, 只要你保证上一个 then 返回了东西即可</span></span><br><span class="line"><span class="keyword">let</span> promise = readFile(<span class="string">'foo.txt'</span>)</span><br><span class="line">promise</span><br><span class="line"> .then(</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params">content</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'debug file content'</span>, content)</span><br><span class="line"> <span class="keyword">const</span> c = content + <span class="string">' suffix1'</span></span><br><span class="line"> <span class="keyword">return</span> c</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'debug error message'</span>, error)</span><br><span class="line"> }</span><br><span class="line"> )</span><br><span class="line"> .then(<span class="function"><span class="keyword">function</span>(<span class="params">c1</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'second then'</span>, c1)</span><br><span class="line"> <span class="keyword">const</span> c = c1 + <span class="string">' suffix2'</span></span><br><span class="line"> <span class="keyword">return</span> c</span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function"><span class="keyword">function</span>(<span class="params">c</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'third then'</span>, c)</span><br><span class="line"> })</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'GUA ****** line 46'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 上面的写法也可以写成下面这样</span></span><br><span class="line"><span class="comment">// 把 reject 的操作放在 catch 里面</span></span><br><span class="line">promise</span><br><span class="line"> .then(<span class="function"><span class="keyword">function</span>(<span class="params">content</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'debug file content'</span>, content)</span><br><span class="line"> })</span><br><span class="line"> .catch(<span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'debug error message'</span>, error)</span><br><span class="line"> })</span><br><span class="line"><span class="comment">// 有时候会碰到批量执行异步操作，如果直接用循环 + 调用函数的形式会比较麻烦</span></span><br><span class="line"><span class="comment">// 使用 Promise.all 就很方便了</span></span><br><span class="line"><span class="comment">// all 方法是直接挂在 Promise 类上的，而 then catch 这些方法是挂在原型上</span></span><br><span class="line"><span class="comment">// Promise.all 会把数组里面所有的 promise 对象都执行完</span></span><br><span class="line"><span class="comment">// 再往下调用</span></span><br><span class="line"><span class="built_in">Promise</span>.all(list).then(<span class="function"><span class="keyword">function</span>(<span class="params">content</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'Promise.all, content'</span>, content)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h4 id="重命名文件的方法"><a href="#重命名文件的方法" class="headerlink" title="重命名文件的方法"></a>重命名文件的方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> file = app.$(<span class="string">'videoInput'</span>).files[<span class="number">0</span>];</span><br><span class="line"><span class="comment">// 重命名</span></span><br><span class="line"><span class="keyword">var</span> aafile = <span class="keyword">new</span> File([file], <span class="string">"aa.mp4"</span>);</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="BOM-API"><a href="#BOM-API" class="headerlink" title="BOM API"></a><strong>BOM API</strong></h2><table>
<thead>
<tr>
<th style="text-align:left">属性</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">location</td>
<td style="text-align:left">管理 URL(改变 href 属性就可以跳转页面)</td>
</tr>
<tr>
<td style="text-align:left">navigator</td>
<td style="text-align:left">对象是用来查询浏览器的信息的 例如 navigator.userAgent</td>
</tr>
<tr>
<td style="text-align:left">history</td>
<td style="text-align:left">对象是用来处理历史纪录的</td>
</tr>
<tr>
<td style="text-align:left">screen</td>
<td style="text-align:left">管理屏幕</td>
</tr>
<tr>
<td style="text-align:left">window</td>
<td style="text-align:left">管理浏览器所有的东西</td>
</tr>
<tr>
<td style="text-align:left">open（‘url’，‘_self/_blank’）</td>
<td style="text-align:left">打开一个新窗口 打开自身或另打开</td>
</tr>
<tr>
<td style="text-align:left">close()</td>
<td style="text-align:left">关闭窗口</td>
</tr>
<tr>
<td style="text-align:left">document.body.scrollTop</td>
<td style="text-align:left">滚轮离顶部距离</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">history.length <span class="comment">// 历史列表中的 url 数量</span></span><br><span class="line">history.back() <span class="comment">// 相当于点击后退按钮</span></span><br><span class="line">history.forward() <span class="comment">// 相当于点前进</span></span><br><span class="line">history.go(<span class="number">-2</span>) <span class="comment">// 相当于点击两次后退按钮</span></span><br><span class="line"><span class="comment">//H5新函数</span></span><br><span class="line"><span class="keyword">var</span> state = {</span><br><span class="line"> page: <span class="string">'settings'</span>,</span><br><span class="line">}</span><br><span class="line">history.pushState(state, <span class="string">'settings'</span>, <span class="string">'/settings'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*三个参数分别是</span></span><br><span class="line"><span class="comment"> 1.自定义对象</span></span><br><span class="line"><span class="comment"> 2.新页面的标题, 但是现在还没有浏览器实现这个功能</span></span><br><span class="line"><span class="comment"> 3.新页面的地址(/...)</span></span><br><span class="line"><span class="comment"> </span></span><br><span class="line"><span class="comment">用户点击 前进 后退 按钮的时候, 会触发 window 的 popstate事件</span></span><br><span class="line"><span class="comment">于是可以在这里操作*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'popstate'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> state = event.state</span><br><span class="line"> <span class="comment">// state 就是 pushState 的第一个参数 被储存</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'pop state'</span>, state)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">/*还有一个 replaceState 函数, 它的作用和 pushState 一样, 只是不生成一条历史纪录</span></span><br><span class="line"><span class="comment">只能在相同域名下使用*/</span></span><br></pre></td></tr></table></figure>
<hr>
<h2 id="DOM-API"><a href="#DOM-API" class="headerlink" title="DOM API"></a><strong>DOM API</strong></h2><ul>
<li>DOM 是 HTML 文件</li>
<li>DOM API 是浏览器提供给 JavaScript 操作 html 页面的交互方式</li>
</ul>
<h4 id="常用-1"><a href="#常用-1" class="headerlink" title="常用"></a>常用</h4><figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><input <span class="attribute">id</span>=<span class="string">"id"</span> <span class="attribute">type</span>=<span class="string">"text"</span> <span class="attribute">value</span>=<span class="string">"Gua"</span>></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th style="text-align:left">属性 <a href="#选择器">（元素 .class #id）</a></th>
<th style="text-align:center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">var <code>omg</code> = document.querySelector( <code>'#id'</code> )</td>
<td style="text-align:center">获取 DOM 对象</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">var <code>omgs</code> = document.querySelectorAll(<code>'.classname'</code>)</td>
<td style="text-align:center">获取 DOM 对象组</td>
</tr>
<tr>
<td style="text-align:left">var <code>omgValue</code> = <code>omg</code>.getAttribute( <code>'value'</code> )</td>
<td style="text-align:center">获取 属性值</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.setAttribute( <code>'value'</code> , <code>'Gua'</code> )</td>
<td style="text-align:center">修改 属性值</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.hasAttribute( <code>'value'</code> )</td>
<td style="text-align:center">查询 是否存在</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.removeAttribute( <code>'type'</code> )</td>
<td style="text-align:center">删除 某个属性</td>
</tr>
<tr>
<td style="text-align:left">var <code>allProperty</code> = <code>omg</code>.attributes</td>
<td style="text-align:center">查找 所有属性</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.remove( )</td>
<td style="text-align:center">整个删除 元素</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.dataset.()</td>
<td style="text-align:center">获取 data-()值</td>
</tr>
<tr>
<td style="text-align:left">var button = document.<strong>createElement</strong>(‘button’)</td>
<td style="text-align:center">创建 元素</td>
</tr>
<tr>
<td style="text-align:left">button.<strong>innerHTML</strong> = ‘注册用户’</td>
<td style="text-align:center">设置属性</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.<strong>appendChild</strong>(button)</td>
<td style="text-align:center">给一个元素添加子元素</td>
</tr>
<tr>
<td style="text-align:left"><code>omg</code>.<strong>insertAdjacentHTML</strong>( <code>'beforeend'</code>, <code>html</code> )</td>
<td style="text-align:center">插入 HTML</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">insertAdjacentHTML</th>