-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1664 lines (1175 loc) · 241 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="http://yoursite.com">
<title>web前端博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="前端所用笔记">
<meta property="og:type" content="website">
<meta property="og:title" content="web前端博客">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="web前端博客">
<meta property="og:description" content="前端所用笔记">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="web前端博客">
<meta name="twitter:description" content="前端所用笔记">
<link rel="alternative" href="/atom.xml" title="web前端博客" type="application/atom+xml">
<link rel="icon" href="/images/favicon.png">
<link rel="stylesheet" type="text/css" href="/./main.0cf68a.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
</head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #4d4d4d"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/images/logo.png" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">Wia</a></h1>
</hgroup>
<p class="header-subtitle">没有激流就称不上勇进，没有山峰则谈不上攀登</p>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">目录</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/shangsheng" title="github"><i class="icon-github"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #4d4d4d"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/images/logo.png" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">Wia</h1>
</hgroup>
<p class="header-subtitle"><i class="icon icon-quo-left"></i>没有激流就称不上勇进，没有山峰则谈不上攀登<i class="icon icon-quo-right"></i></p>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/shangsheng" title="github"><i class="icon-github"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 50%">
<li style="width: 50%"><a href="/">主页</a></li>
<li style="width: 50%"><a href="/archives">目录</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-小程序网络请求封装" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/03/09/小程序网络请求封装/">小程序网络请求封装</a>
</h1>
<a href="/2020/03/09/小程序网络请求封装/" class="archive-article-date">
<time datetime="2020-03-09T09:49:16.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-03-09</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> *GET请求封装 </div><div class="line"> **/</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">get</span>(<span class="params">url,data={}</span>)</span>{</div><div class="line"> <span class="keyword">return</span> request(url,data,<span class="string">'GET'</span>)</div><div class="line">}</div><div class="line"><span class="comment">/**</span></div><div class="line"> * POST请求封装</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">post</span>(<span class="params">url,data={}</span>)</span>{</div><div class="line"> <span class="keyword">return</span> requst(url,data,<span class="string">'POST'</span>)</div><div class="line">}</div><div class="line"><span class="comment">/**</span></div><div class="line"> *微信的request </div><div class="line"> **/</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">url,data={},method=<span class="string">'GET'</span></span>)</span>{</div><div class="line"> <span class="keyword">var</span> contentType = <span class="string">'application/json'</span>;</div><div class="line"> <span class="keyword">return</span> <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>{</div><div class="line"> wx.request({</div><div class="line"> <span class="attr">url</span>:url,</div><div class="line"> <span class="attr">data</span>:data,</div><div class="line"> <span class="attr">method</span>:method,</div><div class="line"> <span class="attr">header</span>:{</div><div class="line"> <span class="string">'Content-Type'</span>:contentType,</div><div class="line"> <span class="string">'Authorization'</span>:<span class="string">'Bearer'</span>+getDataByKey(<span class="string">'token'</span>)</div><div class="line"> },</div><div class="line"> <span class="attr">success</span>:<span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'=================================================================================='</span>)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 接口地址：'</span>+url)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 接口参数: '</span>+<span class="built_in">JSON</span>.stringify(data))</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 请求类型: '</span>+method)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 接口状态: '</span>+res.statusCode);</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'==================================================================================='</span>)</div><div class="line"> <span class="keyword">if</span>(res.statusCode == <span class="number">200</span>){</div><div class="line"> <span class="comment">//请求正常200</span></div><div class="line"> <span class="comment">//AES解密返回的数据</span></div><div class="line"> <span class="keyword">var</span> daesData =<span class="literal">null</span></div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="comment">//如果不需要加解密，可以自行去掉，直接使用数据 res.data。</span></div><div class="line"> daesData = aes.getDAes(res.data)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'解密后的数据：'</span> + daesData)</div><div class="line"> daesData = <span class="built_in">JSON</span>.parse(daesData)</div><div class="line"> <span class="keyword">if</span> (daesData.status) {</div><div class="line"> <span class="comment">//正常</span></div><div class="line"> resolve(daesData.data);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="comment">//错误</span></div><div class="line"> reject(daesData.message)</div><div class="line"> }</div><div class="line"> } <span class="keyword">catch</span> (error) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 数据解码失败'</span>)</div><div class="line"> reject(<span class="string">"数据解码失败"</span>)</div><div class="line"> }</div><div class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(res.statusCode == <span class="number">401</span>){</div><div class="line"> <span class="comment">//此处验证了token的登录失效，如果不需要，可以去掉。</span></div><div class="line"> <span class="comment">//未登录，跳转登录界面</span></div><div class="line"> reject(<span class="string">"登录已过期"</span>)</div><div class="line"> wx.showModal({</div><div class="line"> <span class="attr">title</span>: <span class="string">'提示'</span>,</div><div class="line"> <span class="attr">content</span>: <span class="string">'登录已过期，请立即登录，否则无法正常使用'</span>,</div><div class="line"> success(res) {</div><div class="line"> <span class="keyword">if</span> (res.confirm) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'用户点击确定'</span>)</div><div class="line"> wx.navigateTo({</div><div class="line"> <span class="attr">url</span>: <span class="string">'/pages/login/login?toPageUrl=401'</span>,</div><div class="line"> })</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (res.cancel) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'用户点击取消'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> })</div><div class="line"> }<span class="keyword">else</span> {</div><div class="line"> <span class="comment">//请求失败</span></div><div class="line"> reject(<span class="string">"请求失败："</span> + res.statusCode)</div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">fail</span>: <span class="function"><span class="keyword">function</span>(<span class="params">err</span>) </span>{</div><div class="line"> <span class="comment">//服务器连接异常</span></div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'==============================================================================================='</span>)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 接口地址：'</span> + url)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 接口参数：'</span> + <span class="built_in">JSON</span>.stringify(data))</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'== 请求类型：'</span> + method)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"== 服务器连接异常"</span>)</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'==============================================================================================='</span>)</div><div class="line"> reject(<span class="string">"服务器连接异常，请检查网络再试"</span>)</div><div class="line"> }</div><div class="line"> })</div><div class="line"> })</div><div class="line">}</div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> request,</div><div class="line"> get,</div><div class="line"> post</div><div class="line">}</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">小程序</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">网络请求封装</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/03/09/小程序网络请求封装/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-通过正则把文本里的链接加上a标签" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/12/06/通过正则把文本里的链接加上a标签/">通过正则把文本里的链接加上a标签</a>
</h1>
<a href="/2019/12/06/通过正则把文本里的链接加上a标签/" class="archive-article-date">
<time datetime="2019-12-06T02:36:06.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-12-06</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="通过正则把文本里的链接加上a标签"><a href="#通过正则把文本里的链接加上a标签" class="headerlink" title="通过正则把文本里的链接加上a标签"></a>通过正则把文本里的链接加上a标签</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//javascript 正则替换</span></div><div class="line"><span class="keyword">var</span> sHtml =<span class="string">"http://www.huhangfei.com/"</span>;</div><div class="line"><span class="comment">//替换http://开头链接</span></div><div class="line"><span class="keyword">if</span> (sHtml.toLowerCase().indexOf(<span class="string">"http://"</span>) >= <span class="number">0</span>) {</div><div class="line"> sHtml = sHtml.replace(<span class="regexp">/(^|[^<=""])(http:(\/\/|\\\\)(([\w\/\\\+\-~`@:%])+\.)+([\w\/\\\.\=\?\+\-~`@\':!%#]|(&amp;)|&)+)/g</span>, <span class="string">"$1<a target=\"_blank\" href=\"$2\">$2</a>"</span>);</div><div class="line">}</div><div class="line"><span class="comment">//替换 www. bbs. 等开头网址</span></div><div class="line"><span class="keyword">if</span> (sHtml.toLowerCase().indexOf(<span class="string">"www."</span>) >= <span class="number">0</span> || sHtml.toLowerCase().indexOf(<span class="string">"bbs."</span>) >= <span class="number">0</span>) {</div><div class="line"> sHtml = sHtml.replace(<span class="regexp">/(^|[^\/\\\w\=])((www|bbs)\.(\w)+\.([\w\/\\\.\=\?\+\-~`@\'!%#]|(&amp;))+)/g</span>, <span class="string">"$1<a target=\"_blank\" href=http://$2>$2</a>"</span>);</div><div class="line">}</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">正则</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">a标签</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/12/06/通过正则把文本里的链接加上a标签/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue开发登录步骤" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/11/16/vue开发登录步骤/">vue开发登录步骤</a>
</h1>
<a href="/2019/11/16/vue开发登录步骤/" class="archive-article-date">
<time datetime="2019-11-16T09:49:16.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-11-16</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="1-第一次登陆的时候，前端调用后端的接口，发送用户账号和密码"><a href="#1-第一次登陆的时候，前端调用后端的接口，发送用户账号和密码" class="headerlink" title="1.第一次登陆的时候，前端调用后端的接口，发送用户账号和密码"></a>1.第一次登陆的时候，前端调用后端的接口，发送用户账号和密码</h3><h3 id="2-后端收到账号和密码，验证账号和密码正确，返回前端一个token"><a href="#2-后端收到账号和密码，验证账号和密码正确，返回前端一个token" class="headerlink" title="2.后端收到账号和密码，验证账号和密码正确，返回前端一个token"></a>2.后端收到账号和密码，验证账号和密码正确，返回前端一个token</h3><h3 id="3-前端拿到token-把token存储到localStorage和vueX中，并跳转路由页面"><a href="#3-前端拿到token-把token存储到localStorage和vueX中，并跳转路由页面" class="headerlink" title="3.前端拿到token,把token存储到localStorage和vueX中，并跳转路由页面"></a>3.前端拿到token,把token存储到localStorage和vueX中，并跳转路由页面</h3><h3 id="4-每次跳转路由就判断localStorage中有无token-没有跳转到登录页面，有就跳转到对应的页面"><a href="#4-每次跳转路由就判断localStorage中有无token-没有跳转到登录页面，有就跳转到对应的页面" class="headerlink" title="4.每次跳转路由就判断localStorage中有无token,没有跳转到登录页面，有就跳转到对应的页面"></a>4.每次跳转路由就判断localStorage中有无token,没有跳转到登录页面，有就跳转到对应的页面</h3><h3 id="5-每次调用后端接口都要在请求中加入token"><a href="#5-每次调用后端接口都要在请求中加入token" class="headerlink" title="5.每次调用后端接口都要在请求中加入token"></a>5.每次调用后端接口都要在请求中加入token</h3><h3 id="6-后端判断请求头中有无token，有token，就拿到token进行验证token，验证成功返回数据，验证失败返回401，没有token也返回401"><a href="#6-后端判断请求头中有无token，有token，就拿到token进行验证token，验证成功返回数据，验证失败返回401，没有token也返回401" class="headerlink" title="6.后端判断请求头中有无token，有token，就拿到token进行验证token，验证成功返回数据，验证失败返回401，没有token也返回401"></a>6.后端判断请求头中有无token，有token，就拿到token进行验证token，验证成功返回数据，验证失败返回401，没有token也返回401</h3><h3 id="7-如果前端拿到401，就清楚token并跳转到登录页面"><a href="#7-如果前端拿到401，就清楚token并跳转到登录页面" class="headerlink" title="7.如果前端拿到401，就清楚token并跳转到登录页面"></a>7.如果前端拿到401，就清楚token并跳转到登录页面</h3><p>感谢：<a href="https://www.cnblogs.com/web-record/p/9876916.html" target="_blank" rel="external">一抹夏忧☆</a></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">登录</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/11/16/vue开发登录步骤/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue开发遇到的问题" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/08/28/vue开发遇到的问题/">vue开发遇到的问题</a>
</h1>
<a href="/2019/08/28/vue开发遇到的问题/" class="archive-article-date">
<time datetime="2019-08-28T08:30:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-08-28</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1-邮箱提示问题"><a href="#1-邮箱提示问题" class="headerlink" title="1.邮箱提示问题"></a>1.邮箱提示问题</h2><pre><code>/*邮箱提示:比如input输入123:提示[email protected],[email protected],[email protected],[email protected],[email protected],[email protected],
输入123@1时提示[email protected],[email protected],
输入123@16时提示[email protected],
输入123@@时不提示,也就是输入两个@时不提示,
我用vue写的分两大步,一利用v-model,获取的内容,与邮箱后缀组成的数组遍历的内容链接成新的字符串,在页面上显示,
第二步是根据新组成的字符串字符串进行过滤.
怎么过滤不会了,
我想用正则,正则不知道怎么写,
还没有想到第二种方法,
你帮我看看怎么写还有其他方法吗*/
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div></pre></td><td class="code"><pre><div class="line"> </div><div class="line"> <span class="keyword">var</span> selectedArr=[]<span class="comment">//提示要显示的信息</span></div><div class="line"> <span class="keyword">var</span> selected=[</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@163.com'</span>},</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@126.com'</span>},</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@yeah.net'</span>},</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@vip.163.com'</span>},</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@vip.126.com'</span>},</div><div class="line"> {<span class="attr">eSuffix</span>:<span class="string">'@188.com'</span>},</div><div class="line">]<span class="comment">//邮箱后缀</span></div><div class="line"> </div><div class="line"> <span class="keyword">var</span> eValue =<span class="keyword">this</span>.login.el.eValue;<span class="comment">//input输入获取的内容</span></div><div class="line"> <span class="keyword">var</span> flag = <span class="string">''</span>;</div><div class="line"> </div><div class="line"> <span class="keyword">if</span>(eValue.indexOf(<span class="string">"@"</span>)><span class="number">0</span>){</div><div class="line"> flag=eValue.substring(eValue.indexOf(<span class="string">"@"</span>)<span class="number">-1</span>);<span class="comment">//获取的输入的@开始的内容</span></div><div class="line"> </div><div class="line"> eValue=eValue.substring(<span class="number">0</span>,eValue.indexOf(<span class="string">"@"</span>));</div><div class="line"> </div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> flag=<span class="string">""</span>;</div><div class="line"> </div><div class="line"> <span class="comment">//首字符是@</span></div><div class="line"> <span class="keyword">if</span>(eValue.substring(<span class="number">0</span>,<span class="number">1</span>) == <span class="string">'@'</span>){</div><div class="line"> eValue=eValue.substring(<span class="number">0</span>,eValue.indexOf(<span class="string">"@"</span>));</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">var</span> val=<span class="string">""</span>;</div><div class="line"> <span class="comment">//将输入内容和后缀链接</span></div><div class="line"> </div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<selected.length;i++){</div><div class="line"> val=selected[i].eSuffix;</div><div class="line"> val=val.substring(val.indexOf(<span class="string">"@"</span>));</div><div class="line"> </div><div class="line"> <span class="keyword">var</span> eSuffix = {<span class="attr">eSuffix</span>:eValue+val}</div><div class="line"> </div><div class="line"> selectedArr.push(eSuffix)</div><div class="line"> </div><div class="line"> }</div><div class="line"> </div><div class="line"> <span class="keyword">var</span> eArr = []<span class="comment">//检查满足条件的内容</span></div><div class="line"> <span class="keyword">if</span>(flag!=<span class="string">""</span>){</div><div class="line"> <span class="keyword">var</span> reg=<span class="keyword">new</span> <span class="built_in">RegExp</span>(flag,<span class="string">"i"</span>);</div><div class="line"> </div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<selectedArr.length;i++){</div><div class="line"> </div><div class="line"> <span class="keyword">if</span>(reg.test(selectedArr[i].eSuffix)){</div><div class="line"> </div><div class="line"> eArr.push(selectedArr[i])</div><div class="line"> </div><div class="line"> <span class="keyword">this</span>.login.el.selTips = <span class="literal">false</span>;</div><div class="line"> </div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> selectedArr.splice(i, <span class="number">1</span>);</div><div class="line"> <span class="keyword">this</span>.login.el.selTips = <span class="literal">true</span>;</div><div class="line"> </div><div class="line"> }</div><div class="line"> }</div><div class="line"> selectedArr = eArr</div><div class="line"> }</div><div class="line"> </div><div class="line"> <span class="keyword">this</span>.$set(<span class="keyword">this</span>.login.el,<span class="string">'selected'</span>,selectedArr)</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">this</span>.login.el.eValue == <span class="string">''</span>){</div><div class="line"> <span class="keyword">this</span>.login.el.selTips = <span class="literal">true</span>;</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> <span class="keyword">this</span>.login.el.selTips = <span class="literal">false</span>;</div><div class="line"> }</div></pre></td></tr></table></figure>
<h2 id="2-vue-swiper-loop循环问题"><a href="#2-vue-swiper-loop循环问题" class="headerlink" title="2.vue-swiper loop循环问题"></a>2.vue-swiper loop循环问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.$http({</div><div class="line"> <span class="attr">method</span>:<span class="string">'get'</span>,</div><div class="line"> <span class="attr">url</span>:<span class="string">'http://192.168.1.74:3000/banner'</span>,</div><div class="line"> }).then(<span class="function"><span class="keyword">function</span>(<span class="params">resp</span>)</span>{ </div><div class="line"> <span class="built_in">console</span>.log(resp.data);</div><div class="line"> that.banners = resp.data.banners</div><div class="line"> </div><div class="line"> that.$nextTick(<span class="function"><span class="params">()</span>=></span>{</div><div class="line"> that.mySwiper.slideTo(<span class="number">0</span>, <span class="number">1000</span>, <span class="literal">false</span>)</div><div class="line"> })</div><div class="line"> }).catch(<span class="function"><span class="params">resp</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'请求失败：'</span>+resp.data+<span class="string">','</span>+resp.statusText);</div><div class="line"> });</div><div class="line"> 添加<span class="keyword">this</span>.$nextTick(<span class="function"><span class="params">()</span>=></span>{</div><div class="line"> <span class="comment">//轮播初始化</span></div><div class="line"> that.mySwiper.slideTo(<span class="number">0</span>, <span class="number">1000</span>, <span class="literal">false</span>)</div><div class="line"> })</div><div class="line"> html代码片段</div><div class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"n-ban d-flag"</span> id=<span class="string">"index-banner"</span>></div><div class="line"> <div class="wrap wr" v-if="banners.length>0"></div><div class="line"> <div v-swiper:mySwiper="swiperOption" ></div><div class="line"> <div class="swiper-wrapper" ></div><div class="line"> <div class="swiper-slide" v-for="banner in banners"></div><div class="line"> <router-link v-for = "item in bannersType" :to="{path:item.path,query:{id:banner.encodeId}}" v-if="item.targetType == banner.targetType && item.targetType != 3000"></div><div class="line"> <img :src="banner.imageUrl"></div><div class="line"> </router-link></div><div class="line"> <router-link :to="banner.url" v-else-if="item.targetType == 3000&&item.targetType == banner.targetType" ></div><div class="line"> <img :src="banner.imageUrl"></div><div class="line"> </router-link></div><div class="line"> </div></div><div class="line"> </div></div><div class="line"> </div><div class="line"> <div class="swiper-pagination"></div></div><div class="line"> </div></div><div class="line"> <a href="javascript:void(0);" class="swiper-button-prev"><</a></div><div class="line"> <a href="javascript:void(0);" class="swiper-button-next">></a></div><div class="line"> </div></div><div class="line"> </div></div><div class="line"> 在轮播的父级元素添加 v-if="banners.length>0"</div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/08/28/vue开发遇到的问题/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-小程序开发流程" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/03/18/小程序开发流程/">小程序开发流程</a>
</h1>
<a href="/2019/03/18/小程序开发流程/" class="archive-article-date">
<time datetime="2019-03-18T09:49:16.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-03-18</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="1-用app-json系统属性建设项目框架"><a href="#1-用app-json系统属性建设项目框架" class="headerlink" title="1.用app.json系统属性建设项目框架"></a>1.用app.json系统属性建设项目框架</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="string">"pages"</span>:[</div><div class="line"> <span class="string">"pages/my-music/my-music"</span>,</div><div class="line"> <span class="string">"pages/for-you/for-you"</span>,</div><div class="line"> <span class="string">"pages/explore/explore"</span>,</div><div class="line"> <span class="string">"pages/broadcast/broadcast"</span>,</div><div class="line"> <span class="string">"pages/search/search"</span>,</div><div class="line"></div><div class="line"> <span class="string">"pages/index/index"</span>,</div><div class="line"> <span class="string">"pages/main/main"</span>,</div><div class="line"> <span class="string">"pages/logs/logs"</span></div><div class="line"> ],</div><div class="line"> <span class="string">"window"</span>:{</div><div class="line"> <span class="string">"backgroundTextStyle"</span>:<span class="string">"light"</span>,</div><div class="line"> <span class="string">"navigationBarBackgroundColor"</span>: <span class="string">"#fff"</span>,</div><div class="line"> <span class="string">"navigationBarTitleText"</span>: <span class="string">"AppleMusic"</span>,</div><div class="line"> <span class="string">"navigationBarTextStyle"</span>:<span class="string">"black"</span>,</div><div class="line"> <span class="string">"backgroundColor"</span>:<span class="string">"#ffffff"</span></div><div class="line"> },</div><div class="line"> <span class="string">"tabBar"</span>:{</div><div class="line"> <span class="string">"color"</span>:<span class="string">"#929292"</span>,</div><div class="line"> <span class="string">"selectedColor"</span>:<span class="string">"#ff2d55"</span>,</div><div class="line"> <span class="string">"borderStyle"</span>:<span class="string">"white"</span>,</div><div class="line"> <span class="string">"backgroundColor"</span>:<span class="string">"#ffffff"</span>,</div><div class="line"> <span class="string">"list"</span>:[{</div><div class="line"> <span class="string">"pagePath"</span>:<span class="string">"pages/my-music/my-music"</span>,</div><div class="line"> <span class="string">"iconpath"</span>:<span class="string">"image/tabbar/1.png"</span>,</div><div class="line"> <span class="string">"selectedIconPath"</span>:<span class="string">"image/tabbar/1-h1.png"</span>,</div><div class="line"> <span class="string">"text"</span>:<span class="string">"我的音乐"</span></div><div class="line"> },{</div><div class="line"> <span class="string">"pagePath"</span>:<span class="string">"pages/for-you/for-you"</span>,</div><div class="line"> <span class="string">"iconpath"</span>:<span class="string">"image/tabbar/2.png"</span>,</div><div class="line"> <span class="string">"selectedIconPath"</span>:<span class="string">"image/tabbar/2-h1.png"</span>,</div><div class="line"> <span class="string">"text"</span>:<span class="string">"为你推荐"</span></div><div class="line"> },{</div><div class="line"> <span class="string">"pagePath"</span>:<span class="string">"pages/explore/explore"</span>,</div><div class="line"> <span class="string">"iconpath"</span>:<span class="string">"image/tabbar/3.png"</span>,</div><div class="line"> <span class="string">"selectedIconPath"</span>:<span class="string">"image/tabbar/3-h1.png"</span>,</div><div class="line"> <span class="string">"text"</span>:<span class="string">"浏览"</span></div><div class="line"> },{</div><div class="line"> <span class="string">"pagePath"</span>:<span class="string">"pages/broadcast/broadcast"</span>,</div><div class="line"> <span class="string">"iconpath"</span>:<span class="string">"image/tabbar/4.png"</span>,</div><div class="line"> <span class="string">"selectedIconPath"</span>:<span class="string">"image/tabbar/4-h1.png"</span>,</div><div class="line"> <span class="string">"text"</span>:<span class="string">"广播"</span></div><div class="line"> },{</div><div class="line"> <span class="string">"pagePath"</span>:<span class="string">"pages/search/search"</span>,</div><div class="line"> <span class="string">"iconpath"</span>:<span class="string">"image/tabbar/5.png"</span>,</div><div class="line"> <span class="string">"selectedIconPath"</span>:<span class="string">"image/tabbar/5-h1.png"</span>,</div><div class="line"> <span class="string">"text"</span>:<span class="string">"搜索"</span></div><div class="line"> }]</div><div class="line"> },</div><div class="line"> <span class="string">"debug"</span>:<span class="literal">true</span></div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="2-在util-js里修改里的时间参数"><a href="#2-在util-js里修改里的时间参数" class="headerlink" title="2.在util.js里修改里的时间参数"></a>2.在util.js里修改里的时间参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"> </div></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">小程序</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">模拟网易云音乐</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/03/18/小程序开发流程/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-jquery和JavaScript面试题" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/14/jquery和JavaScript面试题/">jQuery和JavaScript的面试题</a>
</h1>
<a href="/2019/02/14/jquery和JavaScript面试题/" class="archive-article-date">
<time datetime="2019-02-14T10:52:18.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-02-14</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、JavaScript面试题"><a href="#一、JavaScript面试题" class="headerlink" title="一、JavaScript面试题"></a>一、JavaScript面试题</h2><h4 id="1、scope作用范围"><a href="#1、scope作用范围" class="headerlink" title="1、scope作用范围"></a>1、scope作用范围</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">var</span> a=b=<span class="number">10</span>;</div><div class="line">})();</div><div class="line"><span class="built_in">console</span>.log(b);</div></pre></td></tr></table></figure>
<pre><code>什么会打印在控制台上？
答：
控制台上会打印出 10
因为这里两个声明变量，a是用var 声明的局部变量，而b是全局变量
没有使用 'use strict' 严格模式，在严格模式下，代码就会引发ReferenceError错误，b没有定义（b is undefined），严格模式需要明确指出才能实现全局变量。
</code></pre><h4 id="2、创建源生’native’方法"><a href="#2、创建源生’native’方法" class="headerlink" title="2、创建源生’native’方法"></a>2、创建源生’native’方法</h4><pre><code>给字符串对象定义一个repeatify功能。当传入一个整数n时，它会返回重复n次字符串的结果。例如：
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(<span class="string">'hello'</span>.repeatify(<span class="number">3</span>))</div></pre></td></tr></table></figure>
<pre><code>回答：打印出hellohellohello
实现如下
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">String</span>.prototype.repeatify = <span class="built_in">String</span>.prototype.repeatify || <span class="function"><span class="keyword">function</span>(<span class="params">time</span>)</span>{</div><div class="line"> <span class="keyword">var</span> str= <span class="string">''</span>;</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<time;i++){</div><div class="line"> str +=<span class="keyword">this</span>;</div><div class="line"> };</div><div class="line"> <span class="keyword">return</span> str</div><div class="line">}</div></pre></td></tr></table></figure>
<h4 id="3-声明提升（Hoisting）"><a href="#3-声明提升（Hoisting）" class="headerlink" title="3.声明提升（Hoisting）"></a>3.声明提升（Hoisting）</h4><pre><code>执行这段代码，输出的结果是什么
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(a);</div><div class="line"> <span class="built_in">console</span>.log(foo());</div><div class="line"> <span class="keyword">var</span> a = <span class="number">1</span>;</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">return</span> <span class="number">2</span></div><div class="line"> }</div><div class="line">})()</div></pre></td></tr></table></figure>
<pre><code>答：输出的是 undefined 和 2
原因是变量声明和函数声明会被提升到函数顶部，变量只有声明没有值，因此在打印时它已经存在了，所以打印出undefined
</code></pre><h4 id="4、this在JavaScript中如何工作的"><a href="#4、this在JavaScript中如何工作的" class="headerlink" title="4、this在JavaScript中如何工作的"></a>4、this在JavaScript中如何工作的</h4><pre><code>下面代码会输出什么结果
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"> <span class="keyword">var</span> fullname = <span class="string">'John Doe'</span>;</div><div class="line"> <span class="keyword">var</span> obj = {</div><div class="line"> <span class="attr">fullname</span>: <span class="string">'Colin Ihrig'</span>,</div><div class="line"> <span class="attr">prop</span>: {</div><div class="line"> <span class="attr">fullname</span>: <span class="string">'Aurelio De Rosa'</span>,</div><div class="line"> <span class="attr">getFullname</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.fullname;</div><div class="line"> }</div><div class="line"> }</div><div class="line">};</div><div class="line"><span class="built_in">console</span>.log(obj.prop.getFullname());</div><div class="line"><span class="keyword">var</span> test = obj.prop.getFullname;</div><div class="line"><span class="built_in">console</span>.log(test())</div></pre></td></tr></table></figure>
<pre><code>答：输出的是 Aurelio De Rosa 和 John Doe
原因是:在一个函数中，this的取值是看JavaScript调用方式的和定义方式，而不仅仅是定义方式。
在第一个console.log()中，getFullname()作为obj.prop的被调用对象,所以上下文指向后者，函数返回该对象的fullname,与此相反，getFullname被分配到test(),上下文指的是全局对象（window），只是因为test是被隐式设置的全局对象的属性，出于这个原因，该函数返回window的fullname
</code></pre><h4 id="5、call-和apply"><a href="#5、call-和apply" class="headerlink" title="5、call()和apply()"></a>5、call()和apply()</h4><pre><code>现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。
回答：
call()和apply()强制改变上下文的的this指向
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(test.call(obj.prop))和<span class="built_in">console</span>.log(test.apply(obj.prop))</div></pre></td></tr></table></figure>
<h2 id="二、jQuery面试问题"><a href="#二、jQuery面试问题" class="headerlink" title="二、jQuery面试问题"></a>二、jQuery面试问题</h2><h4 id="1、jQuery库中-是什么"><a href="#1、jQuery库中-是什么" class="headerlink" title="1、jQuery库中$()是什么"></a>1、jQuery库中$()是什么</h4><pre><code>$()是jQuery()的别称，乍一看比较怪异，还使jQuery代码羞涩难懂，但是等你适应了，就会爱上它的简单了。$()函数是把任何对象包裹成jQuery对象，接着你就会被允许调用jQuery里的定义的多个不同方法。你甚至传入选择器字符串与$()函数，它会返回包含所有匹配DOM元素数组的jQuery对象。
</code></pre><h4 id="2、-doument-ready-是什么函数，为什么要用它"><a href="#2、-doument-ready-是什么函数，为什么要用它" class="headerlink" title="2、$(doument).ready()是什么函数，为什么要用它"></a>2、$(doument).ready()是什么函数，为什么要用它</h4><pre><code>ready()函数用于文档进入ready状态的时执行的代码，当DOM完全加载(例如：HTML元素加载完成时DOM树构建完成时)，jQuery允许你的代码执行。使用$(document).ready()的最大好处是解决了跨浏览器的难题。
</code></pre><h4 id="3、JavaScript-window-onload和jQuery-ready-函数的区别"><a href="#3、JavaScript-window-onload和jQuery-ready-函数的区别" class="headerlink" title="3、JavaScript window.onload和jQuery ready()函数的区别"></a>3、JavaScript window.onload和jQuery ready()函数的区别</h4><pre><code>JavaScript window.onload事件和jQuery ready 函数的主要区别是
前者是要等到DOM被创建和图片、音频、视频加载完成以及外部资源加载完成，如果图片加载和媒体加载话费了大量的时间，用户就会感到定义在JavaScript window.onload 的上的代码在执行是有明显迟到。
jQuery ready()函数只需对DOM树加载等待，无需对图片或媒体加载等待，执行起来更快。使用jQuery ready()函数的另一个优势是可以在页面中多次使用它，浏览器会按在HTML里的顺序来执行它，相对于onload来说，只在单一的函数中执行。鉴于这个好处，jQuery ready函数比JavaScript window.onload好用。
</code></pre><h4 id="4、-this-和this在jQuery中的不同"><a href="#4、-this-和this在jQuery中的不同" class="headerlink" title="4、$(this)和this在jQuery中的不同"></a>4、$(this)和this在jQuery中的不同</h4><pre><code>$(this)返回的是jQuery对象，可以对它调用jQuery多个方法，例如text()获取文本，val()获取值等。this是JavaScript中的关键字，表示上下文的DOM元素。不能直接调用jQuery方法，需要$()包裹来执行。
</code></pre>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">jQuery</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">javaScript</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/02/14/jquery和JavaScript面试题/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-小程序面试中的问题" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/13/小程序面试中的问题/">小程序面试遇到的问题</a>
</h1>
<a href="/2019/02/13/小程序面试中的问题/" class="archive-article-date">
<time datetime="2019-02-13T09:49:16.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-02-13</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="1-简单描述下微信小程序文件类型"><a href="#1-简单描述下微信小程序文件类型" class="headerlink" title="1.简单描述下微信小程序文件类型"></a>1.简单描述下微信小程序文件类型</h3><pre><code>答：微信小程序有一下几种文件类型：
一、wxml(weixin MarkUp language) 是框架设计的一套标签语言、结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己构建的一套组件。
二、wxss(weixin style sheets)是一种样式语言，用于描述wxml的组件样式。
三、js逻辑处理、网络请求
四、json 小程序设置，如页面注册、页面标题及tabBar
五、app.json 必须有这个文件、如果没有这个文件项目无法运行，因为微信小程序把这个文件作为配置文件入口，整个小程序的全局配置。包括页面注册、网络设置、以及小程序的window的背景色、配置导航条样式、配置默认标题。
六、app.js 必须有这个文件、如果没有这个文件项目也会报错，这个文件创建一下就行啦，不需要我们现在写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
七、app.wxss 这是个公共的样式文件。
</code></pre><h3 id="2-你是怎么封装微信小程序的数据请求的"><a href="#2-你是怎么封装微信小程序的数据请求的" class="headerlink" title="2.你是怎么封装微信小程序的数据请求的"></a>2.你是怎么封装微信小程序的数据请求的</h3><pre><code>一、将所有的接口放到统一的js文件中并导出。
二、在app.js中创建封装请求的方法。
三、在子页面中调用封装的方法。
</code></pre><h3 id="3-有哪些参数传值的方法"><a href="#3-有哪些参数传值的方法" class="headerlink" title="3.有哪些参数传值的方法"></a>3.有哪些参数传值的方法</h3><pre><code>一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onLoad的param获取参数。但是data-名称不能有大小写字母和不能存放对象。
二、设置id的方法来传递值通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数值。
三、在navigtar中添加参数传值。
四、在navigateTo跳转中的参数 ，通过onload生命周期中获取数据
五、通过app实例获取数据
六、通过本地缓存的方式获取数据
七、通过表单的形式，在submit方法的参数中获取数据，注意input/texttarea等表单组件中要有name属性
八、通过getCurrentPage()方法获取当前页面或多级页面的数据
</code></pre><h3 id="4-你使用过哪些方法，来提升微信小程序的应用速度"><a href="#4-你使用过哪些方法，来提升微信小程序的应用速度" class="headerlink" title="4.你使用过哪些方法，来提升微信小程序的应用速度"></a>4.你使用过哪些方法，来提升微信小程序的应用速度</h3><pre><code>一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件优化方案
</code></pre><h3 id="5-小程序和源生app那个好"><a href="#5-小程序和源生app那个好" class="headerlink" title="5.小程序和源生app那个好"></a>5.小程序和源生app那个好</h3><pre><code>小程序除了拥有公众号的低开发成本及无需下载优势。在服务请求延时与用户体验都得到较大幅度的提升，使得能够承载更复杂的服务功能以及使用户得到更好的用户体验。
</code></pre><h3 id="6-简述微信小程序的原理"><a href="#6-简述微信小程序的原理" class="headerlink" title="6.简述微信小程序的原理"></a>6.简述微信小程序的原理</h3><pre><code>答： 微信小程序采用JavaScript 、wxml 、wxss、三种技术进行开发，从技术讲和现有的前端开发差不多，但是深入挖掘的话有不同。
JavaScript： 首先JavaScript的代码运行在微信app中的，并不是运行在浏览器中的，因此一些h5技术的应用，需要微信app提供api支持，而这限制了h5技术的应用，且其不能称为严格的h5,可称其为伪h5，同理，微信提供的api,h5不支持或支持的不是很好。
wxml: wxml是微信自己给予xml技术开发，因此开发时只能使用微信提供的标签，HTML的标签是无法使用的。
wxss: wxss具有css的大部分特性，但不是所有的都支持，哪些支持哪些不支持，并没有明确的文档。
微信的架构是数据驱动的模式，它的UI和数据是分离的，所有的页面更新都需要通过对数据的更新来实现。
小程序分为两个部分webview和appService。其中webview主要用来展示UI，appService用来处理业务逻辑，数据及接口的调用。他们在两个进程中运行，通过系统jsBridge实现通讯，UI渲染、事件处理。
</code></pre><h3 id="7-分析下小程序的优劣"><a href="#7-分析下小程序的优劣" class="headerlink" title="7.分析下小程序的优劣"></a>7.分析下小程序的优劣</h3><pre><code>答：
优势：一、无需下载通过扫一扫和搜索就可以打开
二、良好的用户体验，打开快
三、开发成本比app低
四、安卓上可以添加到桌面，与原始app差不多
五、为用户提供良好的安全保障。小程序的发布微信有一套严格的审查流程，不能通过的小程序是不能发布到线上的。
劣势：一、限制较多，页面大小不能超过1M,不能打开超过5个层级的页面
二、样式单一，小程序的一些组件样式是成形的，样式不能修改。如幻灯片、导航。
三、推广面窄，不能分享朋友圈，只能分享给朋友、附近小程序推广。其中附近小程序也受微信的限制。
四、依托于微信，无法开发后台管理功能。
</code></pre><h3 id="8-微信小程序与h5的区别"><a href="#8-微信小程序与h5的区别" class="headerlink" title="8.微信小程序与h5的区别"></a>8.微信小程序与h5的区别</h3><pre><code>答：
一、运行环境的不同
传统的HTML运行环境是浏览器，包括webview,而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的解析器，针对小程序专门做了优化，配合自己开发的语言标准，提升了小程序的性能。
二、开发成本的不同
只在微信中运行，不用担心浏览器的兼容性，以及生产环境中出现的不可预料的奇妙bug
三、获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
四、应用在生产环境中的运行流畅度不同
长久以来，HTML5应用面对复杂的业务逻辑或丰富的页面交互时，它的体验总是不尽人意，需要不断的优化项目来提升用户体验，但是由于微信小程序的运行环境独立，不用长期不断的进行优化来提升用户体验。
</code></pre><h3 id="9-怎么解决小程序的异步请求问题"><a href="#9-怎么解决小程序的异步请求问题" class="headerlink" title="9.怎么解决小程序的异步请求问题"></a>9.怎么解决小程序的异步请求问题</h3><pre><code> 在回调函数中调用下一组件的函数：
运营promise函数
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">app.js</div><div class="line"> success:<span class="function"><span class="keyword">function</span>(<span class="params">info</span>)</span>{</div><div class="line"> that.apirtnCallback(info)</div><div class="line"> }</div><div class="line">index.js</div><div class="line"> onload:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> app.apirtnCallback=<span class="function"><span class="params">res</span>=></span>{</div><div class="line"> <span class="built_in">console</span>.log(res)</div><div class="line"> }</div><div class="line"> }</div></pre></td></tr></table></figure>
</code></pre><h3 id="10-小程序的双向绑定和-vue哪里不一样"><a href="#10-小程序的双向绑定和-vue哪里不一样" class="headerlink" title="10.小程序的双向绑定和 vue哪里不一样"></a>10.小程序的双向绑定和 vue哪里不一样</h3><pre><code>小程序this.data属性是不能同步到视图呢，必需是
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.setData({</div><div class="line"> <span class="attr">noBind</span>:<span class="literal">true</span></div><div class="line">})</div></pre></td></tr></table></figure>
</code></pre><h3 id="小程序的生命周期"><a href="#小程序的生命周期" class="headerlink" title="小程序的生命周期"></a>小程序的生命周期</h3><pre><code>onLoad --- 页面加载，调用一次
onShow --- 显示页面，每次打开页面都调用
onReady --- 初次渲染，调用一次
onHide --- 隐藏页面，当navigate To 或底部tab切换时调用
onUnload --- 卸载页面，当redirectTo 或navigateBack时调用
</code></pre><h3 id="小程序的页面跳转"><a href="#小程序的页面跳转" class="headerlink" title="小程序的页面跳转"></a>小程序的页面跳转</h3><pre><code>wx.navigateTo --- 保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面（参数必须是字符串）
wx.redirectTo --- 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面
wx.switchTab --- 跳转到tabber页面，并关闭其他所有非tabBar页面，路径后不能带参数
wx.navigateBack --- 关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
wx.reLaunch --- 关闭所有页面，打开到应用内的某个页面
通过navigator跳转
</code></pre><p>感谢<a href="https://blog.csdn.net/qq_40143330/article/details/79644022" title="[大豆博文]" target="_blank" rel="external">大豆博文</a>微信小程序的面试题</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">小程序</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">面试</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/02/13/小程序面试中的问题/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-游戏开发过程" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/12/25/游戏开发过程/">游戏开发过程</a>
</h1>
<a href="/2018/12/25/游戏开发过程/" class="archive-article-date">
<time datetime="2018-12-25T09:49:16.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2018-12-25</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">html5</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">游戏</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2018/12/25/游戏开发过程/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-面试中的问题" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/12/03/面试中的问题/">面试题</a>
</h1>
<a href="/2018/12/03/面试中的问题/" class="archive-article-date">
<time datetime="2018-12-03T02:09:15.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2018-12-03</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="移动端前端开发与PC端比有哪些不同？"><a href="#移动端前端开发与PC端比有哪些不同？" class="headerlink" title="移动端前端开发与PC端比有哪些不同？"></a>移动端前端开发与PC端比有哪些不同？</h2><pre><code>第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。
第五： 微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。
第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。
第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。
第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。
第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。
第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。
第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。
</code></pre><h3 id="前端两种主流跨域方案：JSONP-与-CORS。请问使用两种方案在-a-com-向-b-com-发起跨域请求时，b-com-的服务端能否解析到跨域请求携带的-cookie。"><a href="#前端两种主流跨域方案：JSONP-与-CORS。请问使用两种方案在-a-com-向-b-com-发起跨域请求时，b-com-的服务端能否解析到跨域请求携带的-cookie。" class="headerlink" title="前端两种主流跨域方案：JSONP 与 CORS。请问使用两种方案在 a.com 向 b.com 发起跨域请求时，b.com 的服务端能否解析到跨域请求携带的 cookie。"></a>前端两种主流跨域方案：JSONP 与 CORS。请问使用两种方案在 a.com 向 b.com 发起跨域请求时，b.com 的服务端能否解析到跨域请求携带的 cookie。</h3><pre><code>jsonp能稳定解析到；CORS需要进行withcredentials参数配置后可以解析到，否则不能。
</code></pre><h3 id="检查两节点，实际上，是否是相同节点："><a href="#检查两节点，实际上，是否是相同节点：" class="headerlink" title="检查两节点，实际上，是否是相同节点："></a>检查两节点，实际上，是否是相同节点：</h3><pre><code>sSameNode() 方法检查两节点是否是相同的节点。
isSameNode() 方法返回 true，如果两节点是相同的节点，否则返回 false。
提示：请使用 isEqualNode() 方法来检查两节点是否相等，但不必是相同节点。
</code></pre><h3 id="冒泡排序-n-比较元素的个数"><a href="#冒泡排序-n-比较元素的个数" class="headerlink" title="冒泡排序 (n:比较元素的个数)"></a>冒泡排序 (n:比较元素的个数)</h3><pre><code>比较次数的最小值：n-1;
移动次数的最小值：0；
比较次数的最大值：n(n-1)/2;
移动次数的最大值：3n(n-1)/2;
</code></pre><h3 id="HTTP请求中浏览器缓存机制会用到的协议头？"><a href="#HTTP请求中浏览器缓存机制会用到的协议头？" class="headerlink" title="HTTP请求中浏览器缓存机制会用到的协议头？"></a>HTTP请求中浏览器缓存机制会用到的协议头？</h3><pre><code>Etag
Cache-control
Last-Modified
Expires
</code></pre><h3 id="HTML的-Doctype-作用-严格模式与混杂模式如何区分？它们有何意义"><a href="#HTML的-Doctype-作用-严格模式与混杂模式如何区分？它们有何意义" class="headerlink" title="HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?"></a>HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?</h3><pre><code>1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
</code></pre><h3 id="异步编程的方法"><a href="#异步编程的方法" class="headerlink" title="异步编程的方法"></a>异步编程的方法</h3><pre><code>回调函数，这是异步编程最基本的方法。
事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
发布/订阅，上一节的"事件"，完全可以理解成"信号"。
Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。
</code></pre><h3 id="输入同样的网站pc端和移动端的显示的页面效果不同因为什么？"><a href="#输入同样的网站pc端和移动端的显示的页面效果不同因为什么？" class="headerlink" title="输入同样的网站pc端和移动端的显示的页面效果不同因为什么？"></a>输入同样的网站pc端和移动端的显示的页面效果不同因为什么？</h3><pre><code>手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征，实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。
</code></pre><h3 id="游戏开发的基本性能问题和解决方法"><a href="#游戏开发的基本性能问题和解决方法" class="headerlink" title="游戏开发的基本性能问题和解决方法"></a>游戏开发的基本性能问题和解决方法</h3><pre><code>1.背景的卷曲效果优化。背景不能是无限长的图片拼接，必须有回收移出的场景的方法。
2.将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等、需要空闲时间片运算，不能和UI动画同时进行。
3.将比较大的运算解成不同的时间片，防止阻塞主UI线程。最好使用webworker.
4.注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。
5.进行预处理。将-些常用的过程预处理，
6.控制好频率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片在后台运算。
7.通过GPU加速和css transition 将小鸟飞行动画和背景动画分离。
</code></pre><h3 id="git命令"><a href="#git命令" class="headerlink" title="git命令"></a>git命令</h3><pre><code>$ git add 把文件添加到仓库
$ git reset 把当前版本回退到上一个版本
$ git fetch <远程主机名> 将某个远程主机的更新，全部取回本地
$ git rebase 用于把一个分支的修改合并到当前分支
$ git merge 用于合并指定分支到当前分支
</code></pre><h3 id="HTML5规范"><a href="#HTML5规范" class="headerlink" title="HTML5规范"></a>HTML5规范</h3><pre><code>新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
</code></pre><h3 id="HTML5规范提出的新特性"><a href="#HTML5规范提出的新特性" class="headerlink" title="HTML5规范提出的新特性?"></a>HTML5规范提出的新特性?</h3><pre><code>用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
</code></pre><h3 id="对布局有影响的css属性"><a href="#对布局有影响的css属性" class="headerlink" title="对布局有影响的css属性"></a>对布局有影响的css属性</h3><pre><code>width、height
display
position
float
overflow
font-size
margin
padding
word-break
word-wrap
visibility
</code></pre><h3 id="JavaScript的函数调用有哪几种方式？请举例说明，并分析其不同之处。"><a href="#JavaScript的函数调用有哪几种方式？请举例说明，并分析其不同之处。" class="headerlink" title="JavaScript的函数调用有哪几种方式？请举例说明，并分析其不同之处。"></a>JavaScript的函数调用有哪几种方式？请举例说明，并分析其不同之处。</h3><pre><code>1.函数调用
this指向：window
返回值 ：由return值决定，如果没有return语句就表示没有返回值
2.方法调用
this指向：该方法的调用者
返回值 ：由return语句决定
3.构造函数调用
this指向：当前构造函数创建的对象
返回值 ： a、没有手动添加返回值，默认返回this
b、return了一个基本数据类型（数字、布尔值、null、undefined），最终返回this
c、return了一个复杂数据类型（对象），最终返回该对象
4.上下文调用
call和apply 是方法， 是所有函数都具有的方法。 Function.prototype
只要函数调用call/apply 方法，那么该函数就会立即执行。
this指向： a、传递一个null/undefined------------------->window
b、传递一个数字、字符串、布尔值------->对应的基本包装类型的对象
c、传递一个对象------------------------------->指向该对象
返回值 ：由return语句决定
</code></pre><h3 id="1）说明JavaScript的原型链（prototype-linkage）是如何形成的-2）利用原型链，模拟class的继承机制。"><a href="#1）说明JavaScript的原型链（prototype-linkage）是如何形成的-2）利用原型链，模拟class的继承机制。" class="headerlink" title="1）说明JavaScript的原型链（prototype linkage）是如何形成的,2）利用原型链，模拟class的继承机制。"></a>1）说明JavaScript的原型链（prototype linkage）是如何形成的,2）利用原型链，模拟class的继承机制。</h3><pre><code>1）每声明一个构造函数，就会有一个对应的原型对象，通过构造函数的prototype属性可以访问。而每一个构造函数的实例（即通过new操作符产生的对象）内部都有一个指针指向其构造函数的原型对象。如果我们把一个构造函数的prototype属性指向另一个构造函数的实例，那么我们就可以继承该实例（或称对象）的属性和方法了。那如果另一个构造函数的原型又指向其他构造函数，那么就可以不断继承，像一条链一样，这就是所谓的原型链。
2）
function Animal() {}
Animal.prototype.name = 'Animal'
Animal.prototype.say= function () {
alert(this.name)
}
function Dog() {}
Dog.prototype = new Animal()
Dog.prototype.name = 'Dog'
var dog = new Dog()
doy.say()
</code></pre><h3 id="请举例说明前端MVVM-data-binding机制的实现原理。"><a href="#请举例说明前端MVVM-data-binding机制的实现原理。" class="headerlink" title="请举例说明前端MVVM data-binding机制的实现原理。"></a>请举例说明前端MVVM data-binding机制的实现原理。</h3><pre><code>主要通过Object.defineProperty()方法，其set的内部属性可以起到监听作用，可以为data中每一个字段绑定一个监听器。当发现字段的值发生了改变，在set内部属性中会触发函数，去更改视图的内容。
</code></pre><h3 id="请举例说明DOM-event的传播机制和用途。"><a href="#请举例说明DOM-event的传播机制和用途。" class="headerlink" title="请举例说明DOM event的传播机制和用途。"></a>请举例说明DOM event的传播机制和用途。</h3><pre><code>第一阶段：从window对象传导到目标节点，称为“捕获阶段”(capture phase)。
第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”(bubbling phase)。
</code></pre><h3 id="ajax技术的优点"><a href="#ajax技术的优点" class="headerlink" title="ajax技术的优点"></a>ajax技术的优点</h3><pre><code>可以实现无刷新页面
用户体验好、速度快