-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
527 lines (249 loc) · 148 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Vue-next 3</title>
<link href="/2019/10/07/Vue-next-3/"/>
<url>/2019/10/07/Vue-next-3/</url>
<content type="html"><![CDATA[<h3 id="编译器（Compiler）"><a href="#编译器（Compiler）" class="headerlink" title="编译器（Compiler）"></a>编译器（Compiler）</h3><ul><li>使用模块化架构</li><li>优化 “Block tree”</li><li>更激进的 static tree hoisting 功能</li><li>支持 Source map</li><li>内置标识符前缀（又名 “stripWith”）</li><li>内置整齐打印（pretty-printing）功能</li><li>移除 source map 和标识符前缀功能后，使用 Brotli 压缩的浏览器版本精简了大约 10KB</li></ul><h3 id="运行时（Runtime）"><a href="#运行时（Runtime）" class="headerlink" title="运行时（Runtime）"></a>运行时（Runtime）</h3><ul><li>速度显著提升</li><li>同时支持 Composition API 和 Options API，以及 typings</li><li>基于 Proxy 实现的数据变更检测</li><li>支持 Fragments</li><li>支持 Portals</li><li>支持 Suspense w/ async setup()</li></ul><h3 id="最后，还有一些-2-x-的功能尚未移植过来："><a href="#最后，还有一些-2-x-的功能尚未移植过来：" class="headerlink" title="最后，还有一些 2.x 的功能尚未移植过来："></a>最后，还有一些 2.x 的功能尚未移植过来：</h3><ul><li>服务器端渲染</li><li>< keep-alive ></li><li>< transition ></li><li>Compiler DOM-specific transforms</li><li>v-on DOM 修饰符</li><li>v-model</li><li>v-text</li><li>v-pre</li><li>v-once</li><li>v-html</li><li>v-show</li></ul>]]></content>
<categories>
<category> Vue </category>
</categories>
</entry>
<entry>
<title>JsOpp</title>
<link href="/2019/08/25/JsOpp/"/>
<url>/2019/08/25/JsOpp/</url>
<content type="html"><![CDATA[<h2 id="1-面向过程-面向对象OOP"><a href="#1-面向过程-面向对象OOP" class="headerlink" title="1.面向过程 面向对象OOP"></a>1.面向过程 面向对象OOP</h2>]]></content>
<categories>
<category> javascript </category>
</categories>
</entry>
<entry>
<title>Javascript</title>
<link href="/2019/08/21/Javascript/"/>
<url>/2019/08/21/Javascript/</url>
<content type="html"><![CDATA[<figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. var let</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">10</span>; i++) {</span><br><span class="line"> (<span class="function">(<span class="params">index</span>)=></span>{</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(index);</span><br><span class="line"> },<span class="number">0</span>)</span><br><span class="line"> })(i)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// setTimeout是异步执行，也即每一次for循环执行一次，settimeout都会执行一次，但是里面的settimeout并没有立即被执行，而是等到for循环结束，再执行；</span></span><br><span class="line"> <span class="comment">// for循环了10次，就放了10次，当主线程执行完成后，才进入任务队列里面执行。</span></span><br><span class="line"> <span class="comment">// setTimeout(()=>{</span></span><br><span class="line"> <span class="comment">// console.log(i);</span></span><br><span class="line"> <span class="comment">// },0)</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelector(<span class="string">'.nav'</span>).querySelectorAll(<span class="string">'li'</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < lis.length; i++) { <span class="comment">//同步任务</span></span><br><span class="line"> lis[i].index = i;</span><br><span class="line"> lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">//异步任务</span></span><br><span class="line"> <span class="comment">// console.log(i);</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.index);</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight mipsasm"><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></pre></td><td class="code"><pre><span class="line"><span class="number">2</span>.函数参数默认值</span><br><span class="line">function <span class="keyword">showMessage(a, </span><span class="keyword">b){</span></span><br><span class="line"><span class="keyword"> </span> if(<span class="keyword">b </span>=== undefiend){</span><br><span class="line"> <span class="keyword">b </span>= <span class="number">0</span><span class="comment">;</span></span><br><span class="line"> }</span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line">function <span class="keyword">showMessage(a, </span><span class="keyword">b){</span></span><br><span class="line"><span class="keyword"> </span> <span class="keyword">b </span>= <span class="keyword">b </span><span class="title">||</span> <span class="number">0</span><span class="comment">;</span></span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line">function <span class="keyword">showMessage(a, </span><span class="keyword">b </span>= <span class="number">0</span>){</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight applescript"><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="number">3.</span>创建函数</span><br><span class="line"> - 函数声明</span><br><span class="line"> - 函数表达式</span><br><span class="line"> - 箭头函数</span><br><span class="line">命名函数</span><br><span class="line"><span class="string">"get…"</span> —— 返回值，</span><br><span class="line"><span class="string">"calc…"</span> —— 计算</span><br><span class="line"><span class="string">"create…"</span> —— 创建，</span><br><span class="line"><span class="string">"check…"</span> —— 检查并返回 <span class="built_in">boolean</span> 值，等。</span><br></pre></td></tr></table></figure><figure class="highlight haml"><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></pre></td><td class="code"><pre><span class="line">4.现代模式，"use strict"</span><br><span class="line">JavaScript 严格模式（strict mode）即在严格的条件下运行。</span><br><span class="line">严格模式的限制</span><br><span class="line">-<span class="ruby"> 不允许使用未声明的变量</span></span><br><span class="line"><span class="ruby">- 不允许删除变量或对象</span></span><br><span class="line"><span class="ruby">- 不允许删除函数。</span></span><br><span class="line"><span class="ruby">- 不允许变量重名</span></span><br><span class="line"><span class="ruby">- 不允许使用八进制<span class="symbol">:</span></span></span><br><span class="line"><span class="ruby">- 不允许使用转义字符</span></span><br><span class="line"><span class="ruby">- 不允许对只读属性赋值</span></span><br><span class="line"><span class="ruby">- 不允许对一个使用getter方法读取的属性进行赋值</span></span><br><span class="line"><span class="ruby">- 不允许删除一个不允许删除的属性：</span></span><br><span class="line"><span class="ruby">- 变量名不能使用 <span class="string">"eval"</span> <span class="string">"arguments"</span> 字符串<span class="symbol">:</span></span></span><br><span class="line"><span class="ruby">- 禁止this关键字指向全局对象</span></span><br></pre></td></tr></table></figure><ol start="5"><li><p>代码风格 自动检测器 ESlint<br><img src="/2019/08/21/Javascript/代码风格.png" alt="代码风格"></p></li><li><p>中英文混合输入时候转大写 用 css</p><figure class="highlight stylus"><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="selector-tag">input</span> type=<span class="string">"text"</span> onkeyup=<span class="string">"this.value=this.value.toUpperCase()"</span>></span><br><span class="line"><span class="selector-tag">input</span> {</span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>apply、call、bind区别、用法?</p><figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">apply和<span class="keyword">call</span>都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部<span class="keyword">this</span>的指向）</span><br></pre></td></tr></table></figure></li></ol><p>8.高阶函数 是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。</p><ol start="9"><li><p>闭包</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><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></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 闭包是什么？ </span><br><span class="line"> 闭包是一个函数 （一个作用域可以访问另外一个函数的局部变量）</span><br><span class="line"><span class="number">2.</span> 闭包的作用是什么？ </span><br><span class="line"> 延伸变量的作用范围</span><br><span class="line"></span><br><span class="line"><span class="comment">// 闭包应用-点击li输出当前li的索引号</span></span><br><span class="line"><span class="comment">// 1. 我们可以利用动态添加属性的方式</span></span><br><span class="line"><span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelector(<span class="string">'.nav'</span>).querySelectorAll(<span class="string">'li'</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < lis.length; i++) {</span><br><span class="line"> lis[i].index = i;</span><br><span class="line"> lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// console.log(i);</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.index);</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 2. 利用闭包的方式得到当前小li 的索引号</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < lis.length; i++) {</span><br><span class="line"> <span class="comment">// 利用for循环创建了4个立即执行函数</span></span><br><span class="line"> <span class="comment">// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量</span></span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>{</span><br><span class="line"> <span class="comment">// console.log(i);</span></span><br><span class="line"> lis[i].onclick = <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(i);</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> })(i);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>递归</p><figure class="highlight cpp"><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">js中<span class="string">"Maximum call stack size exceeded"</span>解决方法</span><br><span class="line">错误直译过来就是“栈溢出”，出现这个错误的原因是因为我进行了递归运算，但是忘记添加判断条件，导致递归无线循环下去。。</span><br><span class="line">由于递归很容易发生“栈溢出”错误（<span class="built_in">stack</span> overflow），所以必须要加退出条件 <span class="keyword">return</span>。</span><br></pre></td></tr></table></figure></li><li><p>浅拷贝 深拷贝</p><figure class="highlight qml"><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></pre></td><td class="code"><pre><span class="line">浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.</span><br><span class="line">深拷贝拷贝多层, 每一级别的数据都会拷贝.</span><br><span class="line"><span class="built_in">Object</span>.assign(target, ...sources) es6 新增方法可以浅拷贝</span><br><span class="line">分配assign</span><br><span class="line"><span class="keyword">for</span>...in语句以任意顺序遍历一个对象的除<span class="built_in">Symbol</span>以外的可枚举属性。继承的属性不显示</span><br><span class="line"> <span class="comment">// 深拷贝拷贝多层, 每一级别的数据都会拷贝.</span></span><br><span class="line"> <span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attribute">id:</span><span class="string"> 1,</span></span><br><span class="line"><span class="string"> name</span>: <span class="string">'andy'</span>,</span><br><span class="line"> <span class="attribute">msg</span>: {</span><br><span class="line"> <span class="attribute">age</span>: <span class="number">18</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attribute">color</span>: [<span class="string">'pink'</span>, <span class="string">'red'</span>]</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> o = {};</span><br><span class="line"> <span class="comment">// 封装函数 </span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">deepCopy</span>(<span class="params">newobj, oldobj</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> oldobj) {</span><br><span class="line"> <span class="comment">// 判断我们的属性值属于那种数据类型</span></span><br><span class="line"> <span class="comment">// 1. 获取属性值 oldobj[k]</span></span><br><span class="line"> <span class="keyword">var</span> item = oldobj[k];</span><br><span class="line"> <span class="comment">// 2. 判断这个值是否是数组</span></span><br><span class="line"> <span class="keyword">if</span> (item <span class="keyword">instanceof</span> <span class="built_in">Array</span>) {</span><br><span class="line"> newobj[k] = [];</span><br><span class="line"> deepCopy(newobj[k], item)</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (item <span class="keyword">instanceof</span> <span class="built_in">Object</span>) {</span><br><span class="line"> <span class="comment">// 3. 判断这个值是否是对象</span></span><br><span class="line"> newobj[k] = {};</span><br><span class="line"> deepCopy(newobj[k], item)</span><br><span class="line"> } <span class="title">else</span> {</span><br><span class="line"> <span class="comment">// 4. 属于简单数据类型</span></span><br><span class="line"> newobj[k] = item;</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"> deepCopy(o, obj);</span><br><span class="line"> <span class="built_in">console</span>.log(o);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> arr = [];</span><br><span class="line"> <span class="built_in">console</span>.log(arr <span class="keyword">instanceof</span> <span class="built_in">Object</span>);</span><br><span class="line"> o.msg.age = <span class="number">20</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(obj);</span><br></pre></td></tr></table></figure></li></ol><p>12 <a href="https://github.com/mqyqingfeng/Blog/issues/26" target="_blank" rel="noopener">函数防抖debounce和节流throttle</a><br>防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!</p>]]></content>
<categories>
<category> javascript </category>
</categories>
</entry>
<entry>
<title>Node</title>
<link href="/2019/08/18/Node/"/>
<url>/2019/08/18/Node/</url>
<content type="html"><![CDATA[<p>Node 能干什么</p><ol><li>高性能的网站服务器</li><li>实时多人游戏后台服务器</li><li>简单易用的命名行应用程序</li><li>gulp、less、bower、fis、http-server</li><li>高大上的桌面应用程序</li><li>使用 Web 技术 作为解决方案</li><li>electron Linus + Max + Windows</li><li>底层的物联网开发</li><li>移动开发 等</li></ol>]]></content>
<categories>
<category> Node </category>
</categories>
</entry>
<entry>
<title>webpack</title>
<link href="/2019/08/17/webpack/"/>
<url>/2019/08/17/webpack/</url>
<content type="html"><![CDATA[<p><a href="https://juejin.im/post/5aa3d2056fb9a028c36868aa" target="_blank" rel="noopener">webpack详解</a><br><a href="https://juejin.im/post/5d518b4de51d4561cc25f013" target="_blank" rel="noopener">【Cute-Webpack】Webpack4 入门手册（共 18 章</a><br><a href="https://www.bilibili.com/video/av41546218/?p=1" target="_blank" rel="noopener">《2019最新Webpack4.0教程4.x 成仙之路》</a></p><p><a href="http://nodejs.cn/api/path.html#path_path_resolve_paths" target="_blank" rel="noopener">node中path.resolve()</a></p><h2 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h2><ol><li>入口 entry</li><li>出口 output</li><li>loader</li><li>插件 plugins</li><li>模式 mode</li><li>浏览器兼容性(browser compatibility)</li></ol><h2 id="补充概念"><a href="#补充概念" class="headerlink" title="补充概念"></a>补充概念</h2><ol><li>模块(module): 这些选项决定了如何处理项目中的不同类型的模块。<br>webpack 模块可以支持如下:</li></ol><ul><li>ES2015 import 语句</li><li>CommonJS require() 语句</li><li>AMD define 和 require 语句</li><li>css/sass/less 文件中的 @import 语句。</li><li>样式(url(…))或 HTML 文件(<img src="/2019/08/17/webpack/...">)中的图片链接(image url)</li></ul>]]></content>
</entry>
<entry>
<title>vue后台</title>
<link href="/2019/08/14/vue%E5%90%8E%E5%8F%B0/"/>
<url>/2019/08/14/vue%E5%90%8E%E5%8F%B0/</url>
<content type="html"><![CDATA[<h2 id="1-登录权限"><a href="#1-登录权限" class="headerlink" title="1.登录权限"></a>1.登录权限</h2><p>1.1 做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。这里先简单说一下，我实现登录和权限验证的思路。</p><ul><li>登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。</li><li><p>权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。<strong>页面级</strong></p></li><li><p>后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开游览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。</p></li><li><p>我只在本地存储了一个用户的token，并没有存储别的用户信息（如用户权限，用户名，用户头像等）。有些人会问为什么不把一些其它的用户信息也存一下？主要出于如下的考虑：假设我把用户权限和用户名也存在了本地，但我这时候用另一台电脑登录修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地 cookie 中的名字，并不会去拉去新的用户信息。<br>所以现在的策略是：页面会先从 cookie 中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取user_info，保证用户信息是最新的。<br>当然如果是做了单点登录得功能的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。</p></li></ul><p>1.2 权限 前端or后端 来控制？<br>前面这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。<br>如何用 Vue 实现前端权限控制（路由权限 + 视图权限 + 请求权限）？<br>按照细粒度归归类大致可以分类以下三类：<br>– 页面权限<br>– 模块权限-页面区块（组件）是否显示<br>– 元件权限-组件内元素是否显示</p><h2 id="2-eslint报错的解决"><a href="#2-eslint报错的解决" class="headerlink" title="2.eslint报错的解决"></a>2.eslint报错的解决</h2><p>2.1 Newline required at end of file but not found<br>文件末尾需要换行符，但找不到；<br>2.2 使用 vue-cli 构建的项目，模版是 webpack ，默认的 eslint 配置是以 standard 为基础的，要求是不使用分号。<br>Visual Studio Code<br>安装 vscode-standardjs（已经包含了自动格式化）。</p><p>安装 vscode-standardjs-snippets 以获得 JS snippets。安装 vscode-react-standard 以获得 React snippets。</p>]]></content>
<categories>
<category> Vue </category>
</categories>
</entry>
<entry>
<title>Vue笔记</title>
<link href="/2019/08/13/Vue%E7%AC%94%E8%AE%B0/"/>
<url>/2019/08/13/Vue%E7%AC%94%E8%AE%B0/</url>
<content type="html"><![CDATA[<h3 id="一些概念"><a href="#一些概念" class="headerlink" title="一些概念"></a>一些概念</h3><ul><li>声明式渲染 响应式</li><li>指令 eg: v-model</li><li>v-on 指令添加一个事件监听器.所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。</li><li>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。</li><li><p>声明周期函数<br><strong>beforeCreate创建前状态 created创建完毕状态 beforeMount挂载前状态 mounted挂载结束状态 beforeUpdate更新前状态 updated更新完成状态 beforeDestroy销毁前状态 destroyed销毁完成状态</strong><br><img src="/2019/08/13/Vue笔记/lifecycle.png" alt="声明周期函数"><br><a href="https://segmentfault.com/a/1190000011381906" target="_blank" rel="noopener">声明周期函数link</a></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><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></pre></td><td class="code"><pre><span class="line">beforeCreate: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'------beforeCreate创建前状态------'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el); <span class="comment">//undefined</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data); <span class="comment">//undefined </span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message)</span><br><span class="line"> },</span><br><span class="line"> created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'------created创建完毕状态------'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el); <span class="comment">//undefined</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data); <span class="comment">//已被初始化 </span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message); <span class="comment">//已被初始化</span></span><br><span class="line"> },</span><br><span class="line"> beforeMount: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'------beforeMount挂载前状态------'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + (<span class="keyword">this</span>.$el)); <span class="comment">//已被初始化</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data); <span class="comment">//已被初始化 </span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message); <span class="comment">//已被初始化 </span></span><br><span class="line"> },</span><br><span class="line"> mounted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'------mounted 挂载结束状态------'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el); <span class="comment">//已被初始化</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data); <span class="comment">//已被初始化</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message); <span class="comment">//已被初始化 </span></span><br><span class="line"> },</span><br><span class="line"> beforeUpdate: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'beforeUpdate 更新前状态===============》'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message);</span><br><span class="line"> },</span><br><span class="line"> updated: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'updated 更新完成状态===============》'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message);</span><br><span class="line"> },</span><br><span class="line"> beforeDestroy: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'beforeDestroy 销毁前状态===============》'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message);</span><br><span class="line"> },</span><br><span class="line"> destroyed: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.group(<span class="string">'destroyed 销毁完成状态===============》'</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"el : "</span> + <span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.$el);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"data : "</span> + <span class="keyword">this</span>.$data);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"%c%s"</span>, <span class="string">"color:red"</span>, <span class="string">"message: "</span> + <span class="keyword">this</span>.message)</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></li><li><p>计算属性 computed<br>1.计算属性的getter函数<br>2.计算属性的setter函数<br>3.计算属性的cache缓存属性</p></li><li>虽然计算属性在大多数情况下更合适，但有时也需要一个<strong>自定义的侦听器</strong>。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的</li><li>操作元素的 <strong>class 列表和内联样式</strong>是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。</li><li>条件渲染</li><li>列表渲染</li><li>事件处理 事件修饰符 系统修饰键</li><li>表单输入绑定<br>v-model 指令在表单 <input>、<textarea> 及 </textarea><select> 元素上创建双向数据绑定</select></li></ul><h3 id="1-组件的三大核心概念：属性、事件和插槽。"><a href="#1-组件的三大核心概念：属性、事件和插槽。" class="headerlink" title="1.组件的三大核心概念：属性、事件和插槽。"></a>1.组件的三大核心概念：属性、事件和插槽。</h3><p><img src="/2019/08/13/Vue笔记/1.jpeg" alt="组件的组成-属性"></p>]]></content>
<categories>
<category> Vue </category>
</categories>
</entry>
<entry>
<title>网易严选</title>
<link href="/2019/08/10/%E7%BD%91%E6%98%93%E4%B8%A5%E9%80%89/"/>
<url>/2019/08/10/%E7%BD%91%E6%98%93%E4%B8%A5%E9%80%89/</url>
<content type="html"><![CDATA[<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></pre></td><td class="code"><pre><span class="line">; (<span class="function"><span class="keyword">function</span>(<span class="params">win, lib</span>) </span>{</span><br><span class="line"> <span class="comment">// win window对象</span></span><br><span class="line"> <span class="comment">// lib 设置的lib</span></span><br><span class="line"> <span class="keyword">var</span> doc = win.document;</span><br><span class="line"> <span class="keyword">var</span> docEl = doc.documentElement;</span><br><span class="line"> <span class="keyword">var</span> metaEl = doc.querySelector(<span class="string">'meta[name="viewport"]'</span>);</span><br><span class="line"> <span class="keyword">var</span> flexibleEl = doc.querySelector(<span class="string">'meta[name="flexible"]'</span>);</span><br><span class="line"> <span class="keyword">var</span> dpr = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> scale = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> tid;</span><br><span class="line"> <span class="keyword">var</span> flexible = lib.flexible || (lib.flexible = {});</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (metaEl) {</span><br><span class="line"> <span class="built_in">console</span>.warn(<span class="string">"将根据已有的meta标签来设置缩放比例"</span>);</span><br><span class="line"> <span class="keyword">var</span> match = metaEl.getAttribute(<span class="string">"content"</span>).match(<span class="regexp">/initial\-scale=([\d\.]+)/</span>);</span><br><span class="line"> <span class="keyword">if</span> (match) {</span><br><span class="line"> scale = <span class="built_in">parseFloat</span>(match[<span class="number">1</span>]);</span><br><span class="line"> dpr = <span class="built_in">parseInt</span>(<span class="number">1</span> / scale)</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span> (flexibleEl) {</span><br><span class="line"> <span class="keyword">var</span> content = flexibleEl.getAttribute(<span class="string">"content"</span>);</span><br><span class="line"> <span class="keyword">if</span> (content) {</span><br><span class="line"> <span class="keyword">var</span> initialDpr = content.match(<span class="regexp">/initial\-dpr=([\d\.]+)/</span>);</span><br><span class="line"> <span class="keyword">var</span> maximumDpr = content.match(<span class="regexp">/maximum\-dpr=([\d\.]+)/</span>);</span><br><span class="line"> <span class="keyword">if</span> (initialDpr) {</span><br><span class="line"> dpr = <span class="built_in">parseFloat</span>(initialDpr[<span class="number">1</span>]);</span><br><span class="line"> scale = <span class="built_in">parseFloat</span>((<span class="number">1</span> / dpr).toFixed(<span class="number">2</span>))</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (maximumDpr) {</span><br><span class="line"> dpr = <span class="built_in">parseFloat</span>(maximumDpr[<span class="number">1</span>]);</span><br><span class="line"> scale = <span class="built_in">parseFloat</span>((<span class="number">1</span> / dpr).toFixed(<span class="number">2</span>))</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!dpr && !scale) {</span><br><span class="line"> <span class="keyword">var</span> isAndroid = win.navigator.appVersion.match(<span class="regexp">/android/gi</span>);</span><br><span class="line"> <span class="keyword">var</span> isIPhone = win.navigator.appVersion.match(<span class="regexp">/iphone/gi</span>);</span><br><span class="line"> <span class="keyword">var</span> devicePixelRatio = win.devicePixelRatio; <span class="comment">//window.devicePixelRatio获取的是设备物理像素和独立像素的比</span></span><br><span class="line"> <span class="keyword">if</span> (isIPhone) {</span><br><span class="line"> <span class="keyword">if</span> (devicePixelRatio >= <span class="number">3</span> && (!dpr || dpr >= <span class="number">3</span>)) {</span><br><span class="line"> dpr = <span class="number">3</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span> (devicePixelRatio >= <span class="number">2</span> && (!dpr || dpr >= <span class="number">2</span>)) {</span><br><span class="line"> dpr = <span class="number">2</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> dpr = <span class="number">1</span></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"> dpr = <span class="number">1</span></span><br><span class="line"> }</span><br><span class="line"> scale = <span class="number">1</span> / dpr</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> docEl.setAttribute(<span class="string">"data-dpr"</span>, dpr);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!metaEl) {</span><br><span class="line"> metaEl = doc.createElement(<span class="string">"meta"</span>);</span><br><span class="line"> metaEl.setAttribute(<span class="string">"name"</span>, <span class="string">"viewport"</span>);</span><br><span class="line"> <span class="keyword">if</span> ( !! win.webPageScalable) {</span><br><span class="line"> metaEl.setAttribute(<span class="string">"content"</span>, <span class="string">"initial-scale="</span> + scale + <span class="string">", user-scalable=yes"</span>)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 前端：viewport-fit解决iphoneX的“刘海”问题</span></span><br><span class="line"> metaEl.setAttribute(<span class="string">"content"</span>, <span class="string">"initial-scale="</span> + scale + <span class="string">", maximum-scale="</span> + scale + <span class="string">", minimum-scale="</span> + scale + <span class="string">", user-scalable=no viewport-fit=cover"</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (docEl.firstElementChild) {</span><br><span class="line"> docEl.firstElementChild.appendChild(metaEl)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">var</span> wrap = doc.createElement(<span class="string">"div"</span>);</span><br><span class="line"> wrap.appendChild(metaEl);</span><br><span class="line"> doc.write(wrap.innerHTML)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">refreshRem</span>(<span class="params"></span>) </span>{<span class="comment">//重新设置字体大小</span></span><br><span class="line"> <span class="keyword">var</span> width = docEl.getBoundingClientRect().width; <span class="comment">//getBoundingClientRect用于获取某个元素相对于视窗的位置集合。</span></span><br><span class="line"> <span class="keyword">var</span> ua = navigator.userAgent.toLowerCase();</span><br><span class="line"> <span class="keyword">if</span> (!<span class="regexp">/ipad.*yanxuan/</span>.test(ua)) {</span><br><span class="line"> <span class="keyword">if</span> (width / dpr > <span class="number">750</span>) {</span><br><span class="line"> width = <span class="number">750</span> * dpr</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> rem = width / <span class="number">10</span>;</span><br><span class="line"> docEl.style.fontSize = rem + <span class="string">"px"</span>;</span><br><span class="line"> flexible.rem = win.rem = rem</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 当调整浏览器窗口大小时，发生 resize 事件。</span></span><br><span class="line"> win.addEventListener(<span class="string">"resize"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> clearTimeout(tid);</span><br><span class="line"> tid = setTimeout(refreshRem, <span class="number">300</span>)</span><br><span class="line"> },<span class="literal">false</span>);</span><br><span class="line"> <span class="comment">// 移动端点击返回时强制页面刷新解决办法(pageshow)</span></span><br><span class="line"> <span class="comment">// onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。</span></span><br><span class="line"> win.addEventListener(<span class="string">"pageshow"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (e.persisted) {</span><br><span class="line"> clearTimeout(tid);</span><br><span class="line"> tid = setTimeout(refreshRem, <span class="number">300</span>)</span><br><span class="line"> }</span><br><span class="line"> }, <span class="literal">false</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (doc.readyState === <span class="string">"complete"</span>) {</span><br><span class="line"> doc.body.style.fontSize = <span class="number">12</span> * dpr + <span class="string">"px"</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> doc.addEventListener(<span class="string">"DOMContentLoaded"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> doc.body.style.fontSize = <span class="number">12</span> * dpr + <span class="string">"px"</span></span><br><span class="line"> },<span class="literal">false</span>)</span><br><span class="line"> }</span><br><span class="line"> refreshRem();</span><br><span class="line"></span><br><span class="line"> flexible.dpr = win.dpr = dpr;</span><br><span class="line"> flexible.refreshRem = refreshRem;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 怎么使用 rem2px px2rem吗 ?</span></span><br><span class="line"> flexible.rem2px = <span class="function"><span class="keyword">function</span>(<span class="params">d</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> val = <span class="built_in">parseFloat</span>(d) * <span class="keyword">this</span>.rem;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> d === <span class="string">"string"</span> && d.match(<span class="regexp">/rem$/</span>)) {</span><br><span class="line"> val += <span class="string">"px"</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> val</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> flexible.px2rem = <span class="function"><span class="keyword">function</span>(<span class="params">d</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> val = <span class="built_in">parseFloat</span>(d) / <span class="keyword">this</span>.rem;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> d === <span class="string">"string"</span> && d.match(<span class="regexp">/px$/</span>)) {</span><br><span class="line"> val += <span class="string">"rem"</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> val</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line">})(<span class="built_in">window</span>, <span class="built_in">window</span>[<span class="string">"lib"</span>] || (<span class="built_in">window</span>[<span class="string">"lib"</span>] = {}));</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> h5&css3 </category>
</categories>
</entry>
<entry>
<title>Keno ui</title>
<link href="/2019/07/13/Keno-ui/"/>
<url>/2019/07/13/Keno-ui/</url>
<content type="html"><![CDATA[<p><a href="https://www.progress.com/" target="_blank" rel="noopener">Kendo ui</a></p><h3 id="Kendo-ui"><a href="#Kendo-ui" class="headerlink" title="Kendo ui"></a>Kendo ui</h3><h4 id="1-Kendo-ui-web"><a href="#1-Kendo-ui-web" class="headerlink" title="1. Kendo ui web"></a>1. Kendo ui web</h4><h4 id="2-Kendo-ui-mobile"><a href="#2-Kendo-ui-mobile" class="headerlink" title="2. Kendo ui mobile"></a>2. Kendo ui mobile</h4><h4 id="3-Kendo-ui-DataViz"><a href="#3-Kendo-ui-DataViz" class="headerlink" title="3. Kendo ui DataViz"></a>3. Kendo ui DataViz</h4><blockquote><p>kendo UI web确实是一个很优秀的框架,里面主要含有组件为以下几种:</p><ul><li>AutoComplete 自动补齐</li><li>Calendar组件 日历表 </li><li>ColorPicker 颜色选择器</li><li>ComboBox 下拉列表框</li><li>DatePicker 日期选择组件</li><li>DateTimePicker 日期时间控件</li><li>DropDownList 下拉菜单</li><li>dropdowntree</li><li>Editor 在线编辑器</li><li>Grid 表格组件</li><li>ListView 列表视图</li><li>Menu 菜单</li><li>MultiSelect 多选框</li><li>NumericTextBox 数值文本框</li><li>PanelBar 手风琴选项卡</li><li>Scheduler 日程调度表</li><li>Slider 滑动控制器</li><li>Splitter 界面分割符</li><li>TabStrip 选项卡</li><li>TimePicker 时间选择器</li><li>Tooltip 提示工具</li><li>TreeView 树型视图</li><li>Window 弹窗</li></ul></blockquote><blockquote><p>框架组件:</p><ul><li>DataSource 数据源</li><li>Templates 模板</li><li>MVVM 视图模型</li><li>Effects 8种页面特效</li><li>Drag & Drop 拖放</li><li>Validator 表单验证</li><li>Globalization 全球化数据转换</li><li>Style 样式</li></ul></blockquote>]]></content>
<categories>
<category> h5&css3 </category>
</categories>
<tags>
<tag> Kendo </tag>
</tags>
</entry>
<entry>
<title>面向对象</title>
<link href="/2019/06/23/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/"/>
<url>/2019/06/23/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/</url>
<content type="html"><![CDATA[<ul><li><p>面向对象： java是一门面向对象的语言。</p><ul><li>类： 某一类对象的统称，相当于一个概念性的（不是具体存在的东西）；</li><li>对象： 现实所能接触的各种“东西”；</li></ul></li><li><p>总结： <strong>1.定义类 2.创建对象 3.调用方法</strong></p></li></ul><h3 id="定义类"><a href="#定义类" class="headerlink" title="定义类"></a>定义类</h3><figure class="highlight axapta"><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></pre></td><td class="code"><pre><span class="line">[修饰符] <span class="class"><span class="keyword">class</span> 类名</span></span><br><span class="line"><span class="class"></span>{</span><br><span class="line"> <span class="comment">// 成员变量 field</span></span><br><span class="line"> <span class="comment">// 方法 methods</span></span><br><span class="line"> <span class="comment">// 构造器 constructor</span></span><br><span class="line"> <span class="comment">// 内部类 nested class</span></span><br><span class="line"> <span class="comment">// 初始化</span></span><br><span class="line">}</span><br><span class="line">* 类中五大成员 （只有这五种）</span><br><span class="line"> - 修饰符 <span class="keyword">public</span> <span class="keyword">final</span>|<span class="keyword">abstract</span> </span><br><span class="line"> - 类名 ： （标识符）语法要求 语义化 每个单词首字母大写 不能有分隔符</span><br></pre></td></tr></table></figure><h6 id="1-成员变量-field"><a href="#1-成员变量-field" class="headerlink" title="1.成员变量 field"></a>1.成员变量 field</h6><figure class="highlight aspectj"><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><br><span class="line"> - 修饰符： privite|<span class="keyword">public</span>|<span class="keyword">protected</span>(互斥)，<span class="keyword">static</span> <span class="keyword">final</span> (<span class="keyword">transient</span> 序列化有关)</span><br><span class="line"> - 成员变量名 ： 驼峰命名法 语义化 标识符</span><br></pre></td></tr></table></figure><h6 id="2-方法-methods"><a href="#2-方法-methods" class="headerlink" title="2.方法 methods"></a>2.方法 methods</h6><figure class="highlight aspectj"><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></pre></td><td class="code"><pre><span class="line">[修饰符] 方法返回值类型 方法名（形参列表）</span><br><span class="line">{</span><br><span class="line"> <span class="comment">// 有零条到多的可执行语句组成的方法体</span></span><br><span class="line"> 如果声明了返回值类型，必须要有<span class="keyword">return</span> 语句；</span><br><span class="line">}</span><br><span class="line"> - 修饰符： privite|<span class="keyword">public</span>|<span class="keyword">protected</span>(互斥)，<span class="keyword">static</span> <span class="keyword">final</span>|<span class="keyword">abstract</span>(互斥)</span><br><span class="line"> - 返回值类型 ： 任意基本类型或者引用类型，</span><br><span class="line"> 可以使用<span class="keyword">void</span>声明没有返回值；</span><br><span class="line"> - 方法名 ： 驼峰命名法 语义化（动词） 标识符</span><br><span class="line"> - 形参列表 ：（形参类型<span class="number">1</span> 形参名<span class="number">1</span>, 形参类型<span class="number">2</span> 形参名<span class="number">2</span>）</span><br></pre></td></tr></table></figure><h6 id="3-构造器-constructor"><a href="#3-构造器-constructor" class="headerlink" title="3.构造器 constructor"></a>3.构造器 constructor</h6><figure class="highlight lsl"><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><br><span class="line">{</span><br><span class="line"> <span class="comment">// 有零条到多的可执行语句组成的方法体</span></span><br><span class="line">}</span><br><span class="line"> - 修饰符： privite|public|protected(互斥)</span><br><span class="line"> - 构造器名 ： 构造器名 必须和 类名 相同</span><br><span class="line"> - 形参列表 ：（形参类型<span class="number">1</span> 形参名<span class="number">1</span>, 形参类型<span class="number">2</span> 形参名<span class="number">2</span>）</span><br><span class="line">类中没有定义 系统会提供默认构造器</span><br></pre></td></tr></table></figure><h3 id="使用类-–-类可以用于做什么？"><a href="#使用类-–-类可以用于做什么？" class="headerlink" title="使用类 – 类可以用于做什么？"></a>使用类 – 类可以用于做什么？</h3><ol><li>定义变量。<br>所有类，都是引用类型。所有类，都可以用于定义声明变量。</li><li>调用static修饰方法 或 static修饰变量</li><li>创建对象<br>new 构造器（参数）</li><li>派生子类</li></ol><h3 id="对象可以用于做什么？"><a href="#对象可以用于做什么？" class="headerlink" title="对象可以用于做什么？"></a>对象可以用于做什么？</h3><ol><li>调用无static修饰的成员变量</li><li>调用无this修饰的方法</li></ol><h3 id="对象的this作用"><a href="#对象的this作用" class="headerlink" title="对象的this作用"></a>对象的this作用</h3><p>this可以出现非static的方法 构造器中。作用如下：</p><ul><li>出现非static方法中 this代表改方法的调用者（谁调用该方法 this就代表谁）</li><li>出现在构造器中 this就代表该构造器正在初始化的对象</li></ul><ul><li>this的很重要作用是：用于区分方法或者构造器的局部变量。<br>尤其是与成员变量同名时 – 需要使用this进行区分</li></ul><h3 id="方法的详解："><a href="#方法的详解：" class="headerlink" title="方法的详解："></a>方法的详解：</h3>]]></content>
<categories>
<category> java </category>
</categories>
</entry>
<entry>
<title>技术笔记</title>
<link href="/2019/06/14/%E6%8A%80%E6%9C%AF%E7%AC%94%E8%AE%B0/"/>
<url>/2019/06/14/%E6%8A%80%E6%9C%AF%E7%AC%94%E8%AE%B0/</url>
<content type="html"><![CDATA[<ol><li>如何用JavaScript中 base64转files？</li></ol>]]></content>
<categories>
<category> 工具 </category>
</categories>
</entry>
<entry>
<title>JavaBaseSyntax</title>
<link href="/2019/06/08/JavaBaseSyntax/"/>
<url>/2019/06/08/JavaBaseSyntax/</url>
<content type="html"><![CDATA[<h2 id="3-数据类型和运算符"><a href="#3-数据类型和运算符" class="headerlink" title="3.数据类型和运算符"></a>3.数据类型和运算符</h2><h3 id="3-1注释"><a href="#3-1注释" class="headerlink" title="3.1注释"></a>3.1注释</h3><p>单行注释 多行注释 文档注释<br>Eclipse Java注释模板设置详解以及版权声明</p><h3 id="3-2标识符和关键字"><a href="#3-2标识符和关键字" class="headerlink" title="3.2标识符和关键字"></a>3.2标识符和关键字</h3><ul><li>分号 Java采用（;）作为语句的分隔，因此每个Java语句 <strong>必须</strong> 使用分号作为结尾；</li><li>标识符（变量 类 方法命名的符号）命名规则。</li><li>java 所有的关键字 都是<strong>小写</strong></li></ul><h3 id="3-3数据类型分类"><a href="#3-3数据类型分类" class="headerlink" title="3.3数据类型分类"></a>3.3数据类型分类</h3><p><img src="/2019/06/08/JavaBaseSyntax/datatype.jpg" alt="数据类型分类"></p><ul><li>Java强类型语言 1.所有的变量必须先声明，后使用。 2.指定类型的变量只能接受类型与之匹配的值。</li></ul><blockquote><p>编程的本质，就是对内存中数据的访问和修改 。程序所有的数据都会保存到内存中，程序员需要一定的访问机制来访问或修改内存中的数据。这种机制就是变量，每一个变量都代表了某一小块内存，而且变量是有名字的，程序对变量赋值，实际就是爸数据装入改变量所代表的内存区域的过程。程序读取变量的值，实际就是从改变量所代表的内存区域取值的过程。形象的理解： 变量相当于一个有名称的容器，改容器用于装各种不同类型的数据。</p></blockquote><h3 id="栈-堆-方法区-本地方法区-寄存器"><a href="#栈-堆-方法区-本地方法区-寄存器" class="headerlink" title="栈 堆 方法区 本地方法区 寄存器"></a>栈 堆 方法区 本地方法区 寄存器</h3><p>栈 <em> 存储局部变量<br>堆 </em> new出来的数组或对象<br>方法区<br>本地方法区 <em> 和系统有关<br>寄存器 </em> 给CPU使用</p>]]></content>
<categories>
<category> java </category>
</categories>
</entry>
<entry>
<title>文字工作者的剪贴板神器--Ditto</title>
<link href="/2019/06/03/%E6%96%87%E5%AD%97%E5%B7%A5%E4%BD%9C%E8%80%85%E7%9A%84%E5%89%AA%E8%B4%B4%E6%9D%BF%E7%A5%9E%E5%99%A8-Ditto/"/>
<url>/2019/06/03/%E6%96%87%E5%AD%97%E5%B7%A5%E4%BD%9C%E8%80%85%E7%9A%84%E5%89%AA%E8%B4%B4%E6%9D%BF%E7%A5%9E%E5%99%A8-Ditto/</url>
<content type="html"><![CDATA[<p><a href="https://zhuanlan.zhihu.com/p/38118032" target="_blank" rel="noopener">文字工作者的剪贴板神器–Ditto</a><br><a href="https://zhuanlan.zhihu.com/p/36032098" target="_blank" rel="noopener">使用NAS同步Ditto剪切板数据</a><br><a href="https://zhuanlan.zhihu.com/p/34690374" target="_blank" rel="noopener">免费开源的 Windows 管理剪贴板，让你处理文字更高效：Ditto</a></p>]]></content>
<categories>
<category> 工具 </category>
</categories>
</entry>
<entry>
<title>高拍仪二次开发</title>
<link href="/2019/05/29/%E9%AB%98%E6%8B%8D%E4%BB%AA%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91/"/>
<url>/2019/05/29/%E9%AB%98%E6%8B%8D%E4%BB%AA%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91/</url>
<content type="html"><![CDATA[<h4 id="在网页中调用摄像头实现拍照上传-–-高拍仪二次开发"><a href="#在网页中调用摄像头实现拍照上传-–-高拍仪二次开发" class="headerlink" title="在网页中调用摄像头实现拍照上传 – 高拍仪二次开发"></a>在网页中调用摄像头实现拍照上传 – 高拍仪二次开发</h4><p> 在一些公共部门的办事处，比如银行、护照办理中心、税务等，我们可能会注意到办公桌上摆着这样一台机器。办公人员用它拍摄各种证件、文件、表格，有时候还会拍摄人物面部照片。</p><p>这个仪器的名字是高拍仪。正如你猜测的一样，高拍仪的本质就是摄像头。有些高拍仪只有一个摄像头，用来拍平板上的文档。有些高档一些的在顶部还有一个摄像头，一般用来拍面部。</p><p><strong>和普通的摄像头相比，高拍仪主要有以下两个优势：</strong></p><ol><li><p>像素高。普通摄像头像素一般在一两百万，高拍仪像素大致在300万、500万、800万甚至1000万、1600万。对于文档拍照需求来说，高像素的重要性不言而喻，文字清晰便于阅读，做后续的OCR文字识别处理有会有更高的准确率。</p></li><li><p>高级的图像处理功能。常见的有文字识别模块、文档边缘自动检测、PDF生成模块等。在高拍仪上增加身份证识别模块似乎也成了一种行业标准。集成身份证模块、IC卡读卡器、指纹识别仪等专业设备的高拍仪也不少见。</p></li></ol><p><strong>同样是以文档拍摄为核心功能，高拍仪和扫描仪的成像质量不相上下。那么它们又有什么差别呢？</strong></p><ol><li><p>高拍仪速度快。它有自动检测功能，工作人员只需把文档放到平板上，文档就会被自动拍下来，检测时间在1秒钟左右。如果一次性需要扫描的页数少的话，传统扫描仪放置纸张、调整扫描设置、启动扫描按纽无疑要浪费很多时间。</p></li><li><p>高拍仪不卡纸。</p></li><li><p>高拍仪维护费用低。扫描仪的硒鼓更换费用还是较贵的。</p></li><li><p>高拍仪兼容各种纸张厚度、硬度、大小。</p></li><li><p>高拍仪的两个摄像头可分别用来采集人像和文档。</p></li></ol><p>高档的高拍仪通常会提供编程用的二次开发包，多采用ActiveX技术。这项技术的优点在于对 Internet Explorer 支持得比较好，但不支持其它任何的浏览器，例如Chrome，Firefox，Edge等。即不能跨浏览器。</p><p>另外一个缺陷是不同的高拍仪开发包各不相同，如果我们项目中使用的型号不止一种的话，就需要为各个型号分别定制代码。</p><p>如果想要快速开发出一个高质量的电子影像系统，在预算允许的情况下，大家不妨试用第三方的图像采集开发包。以我试用过的 DynamsoftCamera SDK 为例，它提供了 JavaScript API，可在浏览器里轻松地从USB（USB Video Class，即 UVC） 视频捕获设备, 如摄像头、高拍仪, 捕捉图像和视频流。使用Dynamsoft Camera SDK 这个基于 Web 的开发控件，只需几行JavaScript 代码即可在网页程序中实现实时播放视频流，抓取文档图片或照片并进行在线图片编辑、上传等功能。</p><p>控件的文档获取模式还包含了自动边框检测，以及对文档照片的自动处理和优化功能，包括透视校正、自动去噪等。</p><p>支持多种服务器端编程技术及部署环境，支持asp、jsp、php、asp.net等常见的服务器端编程技术，图像采集结果支持pdf, jpg和bmp格式图片</p>]]></content>
<categories>
<category> 工具 </category>
</categories>
</entry>
<entry>
<title>Java English</title>
<link href="/2019/05/06/Java-English/"/>
<url>/2019/05/06/Java-English/</url>
<content type="html"><![CDATA[<ol><li>compile 编译 javac</li><li>JVM Java Virtual Machine Java虚拟机</li><li>JDK 全称 Java SE Development Kit Java标准开发包</li><li>JRE 全称 Java Runtime Environment Java运行环境</li><li>Garbage Collection GC 垃圾回收</li><li>OOA 面向对象分析</li><li>OOD 面向对象设计</li><li>OOP 面向对象编程</li><li>UML 统一建模语言</li><li>Encapsulation 封装</li><li>Inheritance 继承</li><li>Polymorphism 多态</li></ol><figure class="highlight gradle"><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">Java 语言目前定义了 <span class="number">51</span> 个关键字，这些关键字不能作为变量名、类名和方法名来使用。以下对这些关键字进行了分类。</span><br><span class="line"> 数据类型：<span class="keyword">boolean</span>、<span class="keyword">int</span>、<span class="keyword">long</span>、<span class="keyword">short</span>、<span class="keyword">byte</span>、<span class="keyword">float</span>、<span class="keyword">double</span>、<span class="keyword">char</span>、<span class="keyword">class</span>、<span class="keyword">interface</span>。</span><br><span class="line"> 流程控制：<span class="keyword">if</span>、<span class="keyword">else</span>、<span class="keyword">do</span>、<span class="keyword">while</span>、<span class="keyword">for</span>、<span class="keyword">switch</span>、<span class="keyword">case</span>、<span class="keyword">default</span>、<span class="keyword">break</span>、<span class="keyword">continue</span>、<span class="keyword">return</span>、<span class="keyword">try</span>、<span class="keyword">catch</span>、<span class="keyword">finally</span>。</span><br><span class="line"> 修饰符：<span class="keyword">public</span>、<span class="keyword">protected</span>、<span class="keyword">private</span>、<span class="keyword">final</span>、<span class="keyword">void</span>、<span class="keyword">static</span>、strict、<span class="keyword">abstract</span>、<span class="keyword">transient</span>、<span class="keyword">synchronized</span>、<span class="keyword">volatile</span>、<span class="keyword">native</span>。</span><br><span class="line"> 动作：<span class="keyword">package</span>、<span class="keyword">import</span>、<span class="keyword">throw</span>、<span class="keyword">throws</span>、<span class="keyword">extends</span>、<span class="keyword">implements</span>、<span class="keyword">this</span>、supper、<span class="keyword">instanceof</span>、<span class="keyword">new</span>。</span><br><span class="line"> 保留字：<span class="keyword">true</span>、<span class="keyword">false</span>、<span class="keyword">null</span>、goto、const。</span><br></pre></td></tr></table></figure><figure class="highlight mipsasm"><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></pre></td><td class="code"><pre><span class="line">活动图 activity <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">类图 </span> class <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">通信图 </span> communication <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">组件图 </span> componet <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">复合结构图 </span> composite structure <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">部署图 </span> deployment <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">交互概观图 </span> interactive overview <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">对象图 </span> object <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">包图 </span> package <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">顺序图 </span> sequence <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">状态机图 </span> state machine <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">定时图 </span> timing <span class="keyword">diagram</span></span><br><span class="line"><span class="keyword">用例图 </span> use case <span class="keyword">diagram</span></span><br></pre></td></tr></table></figure><ol start="13"><li>Structured Analysis SA 结构化分析</li><li>Structured Design SD 结构化设计</li><li>Structured Program SP 结构化设计</li><li>Strongly Typed 强类型</li><li>Primitive Type 基本数据类型</li><li>Reference Type 引用类型</li><li>堆heap内存</li><li>栈stack内存</li><li>Binary 二进制</li><li>bit 位</li><li>variable 变量</li><li>syntax [ˈsɪntæks] 句法;句法规则;语构</li><li>init_statement 初始化语句</li><li>test_experession 循环条件</li><li>body_statement 循环体</li><li>interation_statement 迭代语句</li></ol>]]></content>
<categories>
<category> java </category>
</categories>
</entry>
<entry>
<title>时间管理-如何充分利用你的24小时</title>
<link href="/2019/05/05/%E6%97%B6%E9%97%B4%E7%AE%A1%E7%90%86-%E5%A6%82%E4%BD%95%E5%85%85%E5%88%86%E5%88%A9%E7%94%A8%E4%BD%A0%E7%9A%8424%E5%B0%8F%E6%97%B6/"/>
<url>/2019/05/05/%E6%97%B6%E9%97%B4%E7%AE%A1%E7%90%86-%E5%A6%82%E4%BD%95%E5%85%85%E5%88%86%E5%88%A9%E7%94%A8%E4%BD%A0%E7%9A%8424%E5%B0%8F%E6%97%B6/</url>
<content type="html"><![CDATA[<h3 id="时间是一本书"><a href="#时间是一本书" class="headerlink" title="时间是一本书"></a>时间是一本书</h3><p>第一，自我意识是先决条件。只有当你真正意识到你是如何支配时间的，你才能去管理你的时间。<br>（地铁上三小时 刷抖音等）</p><p>第二，目标设定是第一步。除非你确定了你想要达到的目的和想要达成的目标，否则不必为时间的流逝而担心。<br>（Java 坚持一星期跑步四天以上）</p><p>第三，选择是艰难的。时间管理最终就是关于做出选择的。你每天都有24小时的时间可用。每星期168小时。你该如何去使用这些时间，选择权在你手里。</p><p>第四，你可以“创造”时间。寻找方法将非生产性时间转变为生产性时间。找出一天或一周中的空闲时间。你可以富有成效地利用这些时间，而不是坐在那里等待事情发生。</p><p>第五，拖延是大敌。拖延是一种令人讨厌的诱惑。然而，你必须同这种冲动进行斗争。</p><p>第六，要有一颗“似水之心”。如果你能够清理你的工作区域、你的生活，并最终清理你思想中的杂波，你将会显著增加你的工作成效。</p><p>第七，计划和准备是值得花精力去做的。通过提前考虑你想在某一特定事件中或在某一个特定时期内达成什么样的目标，你可以增加成功实现自己所要做的事情的预期。</p><p>第八，确定优先次序。确定优先次序意味着决定什么时候你要做什么。发昂发之一是要记住二八定律，导致达成你目标的80%的进展来自你20%的活动。</p><p>第九，专心致志是问题的关键所在。通过减少干扰并将注意力集中于手头的工作，你可以使自己努力的效果成倍增长。</p><p>第十，选择对你来说行之有效的时间管理技巧。我们已经确认了能够提高效率的时间管理技巧。关键是要努力把你的每一个小时使用得尽可能合理有效。</p><h3 id="《时间管理》"><a href="#《时间管理》" class="headerlink" title="《时间管理》"></a>《时间管理》</h3><p>第一，<strong>做计划的重要性</strong>。很多人都不喜欢做计划，感觉每天时间太忙了，连做计划的时间都没有。这就好比我们在练习射击，一开始就是“预备、开火”，在目标未确定之前就把精力用在了“射击”上，但这并不是正确的。</p><p>我们连目标都没有确定好，就开始盲目射击，又怎么可能打中目标呢。所以应该提前考虑好要，在何时何地与何人，采取何种行动，解决何事，得到何种效果，尽可能的有效利用我们的时间。</p><p>第二，达成目标的方法。二八原则我们都知道，如何应用到生活中呢，一个有效的方法就是，写下一个目标。然后继续写为了达成目标，要做的5件事。然后再写这5件事中哪一件最有可能帮我们达成目标，然后就优先、投入最大精力做这件事。</p><p>第三，同类事务归类处理。比如你目前有ABC三个任务，A是上午、B是中午、C是下午，那么在可能的情况下，将ABC在下午一起处理。同类事务处理起来，转换成本很低，做起来更加高效。将其他类似的同类事物用同样的方式集中处理，那我们的效率就会高效起来。</p><p>第四，成功的秘密：<strong>自律与毅力</strong>。兰德尔专注于学习和研究成功这一主题长达30年之久，他发现成功的秘密就是欲望、努力、钻研、决心和坚持，而这都需要毅力和自律能力。要相信，如果你愿意付出代价，那么一切都是有可能的。</p>]]></content>
<categories>
<category> 杂文 </category>
</categories>
</entry>
<entry>
<title>js函数</title>
<link href="/2019/04/26/js%E5%87%BD%E6%95%B0/"/>
<url>/2019/04/26/js%E5%87%BD%E6%95%B0/</url>
<content type="html"><![CDATA[<h2 id="1-防抖和节流"><a href="#1-防抖和节流" class="headerlink" title="1. 防抖和节流"></a>1. 防抖和节流</h2><p>综合应用场景<br>防抖(debounce):就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。</p><p>search搜索联想，用户在不断输入值时，用防抖来节约请求资源。<br>window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次</p><p>节流(throttle):就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。</p><p>鼠标不断点击触发，mousedown(单位时间内只触发一次)<br>监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断<br>所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。</p><p>防抖函数分为非立即执行版和立即执行版。</p><p>非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。<br>立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。<br><figure class="highlight zephir"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@desc</span> 函数防抖</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> func 函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> wait 延迟执行毫秒数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> immediate true 表立即执行，false 表非立即执行</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span><span class="params">(func,wait,immediate)</span> </span>{</span><br><span class="line"> <span class="keyword">let</span> timeout;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>{</span><br><span class="line"> <span class="keyword">let</span> context = this;</span><br><span class="line"> <span class="keyword">let</span> args = arguments;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (timeout) clearTimeout(timeout);</span><br><span class="line"> <span class="keyword">if</span> (immediate) {</span><br><span class="line"> <span class="keyword">var</span> callNow = !timeout;</span><br><span class="line"> timeout = setTimeout(() => {</span><br><span class="line"> timeout = <span class="keyword">null</span>;</span><br><span class="line"> }, wait)</span><br><span class="line"> <span class="keyword">if</span> (callNow) func.apply(context, args)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> {</span><br><span class="line"> timeout = setTimeout(<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span><br><span class="line"> func.apply(context, args)</span><br><span class="line"> }, wait);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。</p><p>对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。</p><p>时间戳版的函数触发是在时间段内开始的时候<br>定时器版的函数触发是在时间段内结束的时候。</p><figure class="highlight gauss"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @desc 函数节流</span></span><br><span class="line"><span class="comment"> * @param func 函数</span></span><br><span class="line"><span class="comment"> * @param wait 延迟执行毫秒数</span></span><br><span class="line"><span class="comment"> * @param type 1 表时间戳版，2 表定时器版</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">function <span class="built_in">throttle</span>(func, <span class="built_in">wait</span> ,<span class="built_in">type</span>) {</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">type</span>===<span class="number">1</span>){</span><br><span class="line"> <span class="keyword">let</span> previous = <span class="number">0</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">type</span>===<span class="number">2</span>){</span><br><span class="line"> <span class="keyword">let</span> timeout;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">function</span>() {</span><br><span class="line"> <span class="keyword">let</span> context = this;</span><br><span class="line"> <span class="keyword">let</span> args = arguments;</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">type</span>===<span class="number">1</span>){</span><br><span class="line"> <span class="keyword">let</span> now = Date.now();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (now - previous > <span class="built_in">wait</span>) {</span><br><span class="line"> func.apply(context, args);</span><br><span class="line"> previous = now;</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">type</span>===<span class="number">2</span>){</span><br><span class="line"> <span class="keyword">if</span> (!timeout) {</span><br><span class="line"> timeout = <span class="built_in">setTimeout</span>(() => {</span><br><span class="line"> timeout = <span class="built_in">null</span>;</span><br><span class="line"> func.<span class="built_in">apply</span>(context, args)</span><br><span class="line"> }, <span class="built_in">wait</span>)</span><br><span class="line"> }</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> javascript </category>
</categories>
</entry>
<entry>
<title>Lodop使用说明</title>
<link href="/2019/04/09/table%E5%88%B6%E8%A1%A8/"/>
<url>/2019/04/09/table%E5%88%B6%E8%A1%A8/</url>
<content type="html"><![CDATA[<p>[Wingdings 符号编码对照表])(<a href="https://blog.csdn.net/Linux7985/article/details/5030694" target="_blank" rel="noopener">https://blog.csdn.net/Linux7985/article/details/5030694</a>)</p><p>table宽度自适应，而且部分TD是固定宽度。</p><p>只需要将固定宽设死，留下一列不设置宽度，将table宽度设置为100%。</p><figure class="highlight xml"><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></pre></td><td class="code"><pre><span class="line">table-layout:fixed 作用不是很清楚</span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">width</span>=<span class="string">"100%"</span> <span class="attr">border</span>=<span class="string">"1"</span> <span class="attr">cellpadding</span>=<span class="string">"0"</span> <span class="attr">cellspacing</span>=<span class="string">"0"</span> <span class="attr">style</span>=<span class="string">"table-layout:fixed"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">width</span>=<span class="string">"50"</span>></span>10<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">width</span>=<span class="string">"50"</span>></span>20<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">width</span>=<span class="string">"50"</span>></span>30<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">width</span>=<span class="string">"50"</span>></span>40<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">width</span>=<span class="string">"100"</span>></span>50<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>宽度50<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>宽度多多余<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>宽度多余100想要换行<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight armasm"><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></pre></td><td class="code"><pre><span class="line">●PRINT_INIT(<span class="keyword">strPrintTaskName)打印初始化</span></span><br><span class="line"><span class="keyword">●</span>SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,<span class="keyword">strPageName)设定纸张大小</span></span><br><span class="line"><span class="keyword">●</span><span class="keyword">ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项</span></span><br><span class="line"><span class="keyword">●</span><span class="keyword">ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项</span></span><br><span class="line"><span class="keyword">●</span><span class="keyword">ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项</span></span><br><span class="line"><span class="keyword">●</span><span class="keyword">ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形</span></span><br><span class="line"><span class="keyword">●</span>SET_PRINT_STYLE(<span class="keyword">strStyleName, </span>varStyleValue)设置对象风格</span><br><span class="line">●PREVIEW打印预览</span><br><span class="line">●PRINT直接打印</span><br><span class="line">●PRINT_SETUP打印维护</span><br><span class="line">●PRINT_DESIGN打印设计</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>Vue Router</title>
<link href="/2019/03/30/Vue-Router/"/>
<url>/2019/03/30/Vue-Router/</url>
<content type="html"><![CDATA[<ul><li>嵌套的路由/视图表</li><li>模块化的、基于组件的路由配置</li><li>路由参数、查询、通配符</li><li>基于 Vue.js 过渡系统的视图过渡效果</li><li>细粒度的导航控制</li><li>带有自动激活的 CSS class 的链接</li><li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li><li>自定义的滚动条行为</li></ul><h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><h3 id="1-动态路由匹配"><a href="#1-动态路由匹配" class="headerlink" title="1.动态路由匹配"></a>1.动态路由匹配</h3><h3 id="2-嵌套路由"><a href="#2-嵌套路由" class="headerlink" title="2.嵌套路由"></a>2.嵌套路由</h3><p>在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置</p><h3 id="3-编程式的导航"><a href="#3-编程式的导航" class="headerlink" title="3.编程式的导航"></a>3.编程式的导航</h3><figure class="highlight pf"><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></pre></td><td class="code"><pre><span class="line">router.push(location, <span class="keyword">on</span>Complete?, <span class="keyword">on</span>Abort?)</span><br><span class="line"></span><br><span class="line">router.replace(location, <span class="keyword">on</span>Complete?, <span class="keyword">on</span>Abort?)</span><br><span class="line"></span><br><span class="line">router.go(n)</span><br></pre></td></tr></table></figure><h3 id="4-命名路由"><a href="#4-命名路由" class="headerlink" title="4.命名路由"></a>4.命名路由</h3><h3 id="5-命名视图"><a href="#5-命名视图" class="headerlink" title="5.命名视图"></a>5.命名视图</h3><h3 id="6-重定向redirect和别名alias"><a href="#6-重定向redirect和别名alias" class="headerlink" title="6.重定向redirect和别名alias"></a>6.重定向redirect和别名alias</h3><h3 id="7-路由组件传参"><a href="#7-路由组件传参" class="headerlink" title="7.路由组件传参"></a>7.路由组件传参</h3><h3 id="8-HTML5-History-模式"><a href="#8-HTML5-History-模式" class="headerlink" title="8.HTML5 History 模式"></a>8.HTML5 History 模式</h3><p>vue-router <strong>默认 hash 模式</strong> —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 <strong>history 模式</strong>，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面.不过这种模式要玩好，还需要<strong>后台配置支持</strong>。</p><h2 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h2><h3 id="1-导航守卫"><a href="#1-导航守卫" class="headerlink" title="1.导航守卫"></a>1.导航守卫</h3><ul><li>“导航”表示路由正在发生改变。</li></ul><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({ ... })</span><br><span class="line"></span><br><span class="line"><span class="comment">// 全局前置守卫</span></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =></span> {</span><br><span class="line"> <span class="comment">// to: Route: 即将要进入的目标 路由对象</span></span><br><span class="line"> <span class="comment">// from: Route: 当前导航正要离开的路由</span></span><br><span class="line"> <span class="comment">// next: Function</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// 全局后置钩子</span></span><br><span class="line">router.afterEach(<span class="function">(<span class="params">to, <span class="keyword">from</span></span>) =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="2-路由元信息"><a href="#2-路由元信息" class="headerlink" title="2.路由元信息"></a>2.路由元信息</h3><ul><li>定义路由的时候可以配置 meta 字段</li></ul><h3 id="3-过渡动效"><a href="#3-过渡动效" class="headerlink" title="3.过渡动效"></a>3.过渡动效</h3><figure class="highlight apache"><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="section"><transition></span></span><br><span class="line"> <span class="section"><router-view></span><span class="section"></router-view></span></span><br><span class="line"><span class="section"></transition></span></span><br></pre></td></tr></table></figure><h3 id="4-数据获取"><a href="#4-数据获取" class="headerlink" title="4.数据获取"></a>4.数据获取</h3><ul><li>导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。</li><li>导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。</li></ul><h3 id="5-滚动行为"><a href="#5-滚动行为" class="headerlink" title="5.滚动行为"></a>5.滚动行为</h3><p>使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动<br><strong>注意: 这个功能只在支持 history.pushState 的浏览器中可用。</strong><br><figure class="highlight cs"><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="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [...],</span><br><span class="line"> scrollBehavior (to, <span class="keyword">from</span>, savedPosition) {</span><br><span class="line"> <span class="comment">// return 期望滚动到哪个的位置</span></span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><h3 id="6-路由懒加载"><a href="#6-路由懒加载" class="headerlink" title="6.路由懒加载"></a>6.路由懒加载</h3><p>结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。</p>]]></content>
<categories>
<category> Vue </category>
</categories>
</entry>
<entry>
<title>vuex</title>
<link href="/2019/03/28/vuex/"/>
<url>/2019/03/28/vuex/</url>
<content type="html"><![CDATA[<p><a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener">Vuex</a></p><h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><ul><li><p>一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的<strong>状态 (state)</strong>。</p></li><li><p>每一个 Vuex 应用的核心就是 <strong>store（仓库）</strong>。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：</p></li></ul><ol><li><p><strong>Vuex 的状态存储是响应式的</strong>。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</p></li><li><p>你不能直接改变 store 中的状态。<strong>改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation</strong>。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。</p></li></ol><h2 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h2><ol><li>State</li></ol><ul><li><p>Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。</p></li><li><p>mapState辅助函数 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性</p></li><li><strong>对象展开运算符</strong><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？</span><br><span class="line">通常，我们需要使用一个工具函数将多个对象合并为一个，</span><br><span class="line">以使我们可以将最终对象传给 computed 属性。</span><br><span class="line">computed: {</span><br><span class="line"> <span class="function"><span class="title">localComputed</span></span> () { /* ... */ },</span><br><span class="line"> // 使用对象展开运算符将此对象混入到外部对象中</span><br><span class="line"> ...mapState({</span><br><span class="line"> // ...</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><ol start="2"><li>Getter</li></ol><ul><li>有时候我们需要从 store 中的 state 中派生出一些状态 </li><li>通过属性访问</li><li>通过方法访问</li><li>mapGetters 辅助函数</li></ul><ol start="3"><li>Mutations<blockquote><p>更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 <strong>事件类型 (type)</strong> 和 一个 <strong>回调函数 (handler)</strong>。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数</p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">const store = new Vuex.Store({</span><br><span class="line"> state: {</span><br><span class="line"> count: 1</span><br><span class="line"> },</span><br><span class="line"> mutations: {</span><br><span class="line"> increment (state) {</span><br><span class="line"> // 变更状态</span><br><span class="line"> state.count++</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">“当触发一个类型为 increment 的 mutation 时，调用此函数。</span><br><span class="line">”要唤醒一个 mutation handler，</span><br><span class="line">你需要以相应的 <span class="built_in">type</span> 调用 store.commit 方法：</span><br><span class="line">store.commit(<span class="string">'increment'</span>)</span><br></pre></td></tr></table></figure></blockquote></li></ol><ul><li><p><strong>提交载荷（Payload）</strong>你可以向 store.commit <strong>传入额外的参数</strong>，即 mutation 的 载荷（payload）</p><figure class="highlight pf"><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">mutations: {</span><br><span class="line"> increment (<span class="keyword">state</span>, payload) {</span><br><span class="line"> <span class="keyword">state</span>.count += payload.amount</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">在大多数情况下，载荷应该是一个对象</span><br><span class="line">store.commit('increment', {</span><br><span class="line"> amount: <span class="number">10</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>对象风格的提交方式</p></li><li>使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式.</li><li>Mutation 必须是同步函数</li></ul><ol start="4"><li>Action</li></ol><ul><li>Action 类似于 mutation，不同在于：<ol><li>Action 提交的是 mutation，而不是直接变更状态。</li><li>Action 可以包含任意异步操作。<figure class="highlight pf"><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></pre></td><td class="code"><pre><span class="line">const store = new Vuex.Store({</span><br><span class="line"> <span class="keyword">state</span>: {</span><br><span class="line"> count: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> mutations: {</span><br><span class="line"> increment (<span class="keyword">state</span>) {</span><br><span class="line"> <span class="keyword">state</span>.count++</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> actions: {</span><br><span class="line"> increment (context) {</span><br><span class="line"> context.commit('increment')</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li></ol></li></ul><p>Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。</p><ul><li>分发 Action<br>Action 通过 store.dispatch 方法触发：store.dispatch(‘increment’)<br>来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation<br><strong>Action 通常是异步的，那么如何知道 action 什么时候结束呢？</strong><br><strong>更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？</strong></li></ul><ol start="5"><li>Module</li></ol><ul><li>Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块</li></ul><h2 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h2><figure class="highlight mipsasm"><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></pre></td><td class="code"><pre><span class="line">├── index.html</span><br><span class="line">├── main.<span class="keyword">js</span></span><br><span class="line"><span class="keyword">├── </span>api</span><br><span class="line">│ └── ... <span class="comment"># 抽取出API请求</span></span><br><span class="line">├── components</span><br><span class="line">│ ├── App.vue</span><br><span class="line">│ └── ...</span><br><span class="line">└── store</span><br><span class="line"> ├── index.<span class="keyword">js </span> <span class="comment"># 我们组装模块并导出 store 的地方</span></span><br><span class="line"> ├── actions.<span class="keyword">js </span> <span class="comment"># 根级别的 action</span></span><br><span class="line"> ├── mutations.<span class="keyword">js </span> <span class="comment"># 根级别的 mutation</span></span><br><span class="line"> └── modules</span><br><span class="line"> ├── cart.<span class="keyword">js </span> <span class="comment"># 购物车模块</span></span><br><span class="line"> └── products.<span class="keyword">js </span> <span class="comment"># 产品模块</span></span><br></pre></td></tr></table></figure><ul><li>Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：</li></ul><ol><li>应用层级的状态应该集中到单个 store 对象中。</li><li>提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。</li><li>异步逻辑都应该封装到 action 里面。</li></ol><h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><p>Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数</p><h2 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h2><p>在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。</p><h2 id="表单处理"><a href="#表单处理" class="headerlink" title="表单处理"></a>表单处理</h2><p>当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手</p>]]></content>
<categories>
<category> Vue </category>
</categories>
</entry>
<entry>
<title>优雅的使用 icon</title>
<link href="/2019/03/22/%E4%BC%98%E9%9B%85%E7%9A%84%E4%BD%BF%E7%94%A8-icon/"/>
<url>/2019/03/22/%E4%BC%98%E9%9B%85%E7%9A%84%E4%BD%BF%E7%94%A8-icon/</url>
<content type="html"><![CDATA[<p><a href="https://juejin.im/post/59bb864b5188257e7a427c09#heading-7" target="_blank" rel="noopener">手摸手，带你优雅的使用 icon</a><br><a href="https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code" target="_blank" rel="noopener">iconfont 一个阿里爸爸做的开源图库</a></p><h2 id="1-图标大部分是用img"><a href="#1-图标大部分是用img" class="headerlink" title="1. 图标大部分是用img"></a>1. 图标大部分是用img</h2><h2 id="2-x雪碧图image-sprite"><a href="#2-x雪碧图image-sprite" class="headerlink" title="2. x雪碧图image sprite"></a>2. x雪碧图image sprite</h2><h2 id="3-font库-iconfont-三种使用姿势"><a href="#3-font库-iconfont-三种使用姿势" class="headerlink" title="3. font库 iconfont 三种使用姿势"></a>3. font库 iconfont 三种使用姿势</h2><ul><li>3.1 unicode</li><li>3.2 font-class</li><li>3.3 symbol</li></ul>]]></content>
</entry>
<entry>
<title>Git</title>
<link href="/2019/03/18/Git/"/>
<url>/2019/03/18/Git/</url>
<content type="html"><![CDATA[<p><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">史上最浅显易懂的Git教程！</a><br><img src="/2019/03/18/Git/git-guide.jpg" alt="Git常用命令查询表"></p>]]></content>
<categories>
<category> 工具 </category>
</categories>
</entry>
<entry>
<title>AJAX跨域</title>
<link href="/2019/03/17/AJAX%E8%B7%A8%E5%9F%9F/"/>
<url>/2019/03/17/AJAX%E8%B7%A8%E5%9F%9F/</url>
<content type="html"><![CDATA[<p><a href="https://segmentfault.com/a/1190000012469713#articleHeader12" target="_blank" rel="noopener">ajax跨域，这应该是最全的解决方案了</a></p><h3 id="为什么会发生AJAX跨域？？？"><a href="#为什么会发生AJAX跨域？？？" class="headerlink" title="为什么会发生AJAX跨域？？？"></a>为什么会发生AJAX跨域？？？</h3><h4 id="一：浏览器限制"><a href="#一：浏览器限制" class="headerlink" title="一：浏览器限制"></a>一：浏览器限制</h4><p>当我们发送XMLHttpRequest请求的时候，如果（协议 域名 端口）不同，就会产生跨域问题（客户端无法获取服务端的数据）。<br>因此，我们注意到跨域问题是发生在XHR请求的时候，也就是説不是XHR的时候不会发生跨域=> 【JSONP】<br>【JSONP】 动态的创建script标签，使用标签的src属性访问JS文件的形式获取JS脚本，并且这个JS脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据。</p><p>JSONP的弊端：<br>1.要对服务器的代码进行改动<br>2.只支持GET方法(原理是动态创建script来进行请求的)<br>3.发送的不是XMLHttpRequest请求(XMLHttpRequest请求有很多好用的特性)</p><h4 id="二：跨域"><a href="#二：跨域" class="headerlink" title="二：跨域"></a>二：跨域</h4><p>在后端配置客跨域的【CROS方式】全称是”跨域资源共享”（Cross-origin resource sharing）<br>CORS解决跨域问题(也就是我们服务端被调用方解决跨域的思路）</p><p>浏览器将CROS请求分为两类：simple request AND not-so-simple request<br>只要同事满足以下两种条件的 ，就属于简单请求：<br>1.请求方式 HEAD POST GET 之一<br>2.HTTP的头信息不超出以下几种字段：<br>Accept<br>Accept-Language<br>Content-Language<br>Last-Event-ID<br>Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain<br>凡是不同时满足上面两个条件，就属于非简单请求。</p><p>Content-Type用于指定内容类型，一般是指网页中存在的Content-Type，Content-Type属性指定请求和响应的HTTP内容类型。如果未指定 ContentType，默认为text/html。<br>application/x-www-form-urlencoded是常用的表单发包方式，普通的表单提交，或者js发包，默认都是通过这种方式。<br>multipart/form-data用在发送文件的POST包。<br>text/xml微信用的是这种数据格式发送请求的。<br>application/json消息主体是序列化后的 JSON 字符串。<br>text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。<br>2.1 简单请求 对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。<br><img src="/2019/03/17/AJAX跨域/1.png" alt="浏览器发送"><br><img src="/2019/03/17/AJAX跨域/2.png" alt="服务器返回的响应"></p><p>Access-Control-Allow-Credentials表示是否允许发送Cookie ，开发者必须在AJAX请求中打开withCredentials属性。如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号</p><p>2.2 非简单请求 是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json；<br>非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。<br>Access-Control-Request-Method用来列出浏览器的CORS请求会用到哪些HTTP方法。<br>Access-Control-Request-Headers该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。<br>服务器收到”预检”请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。<br>OPTIONS预检的优化 Access-Control-Max-Age: 返回结果可以用于缓存的最长时间，单位是秒。在Firefox中，上限是24小时 （即86400秒），而在Chromium 中则是10分钟（即600秒）。Chromium 同时规定了一个默认值 5 秒。如果值为 -1，则表示禁用缓存，每一次请求都需要提供预检请求，即用OPTIONS请求进行检测（即preflight请求-options）。</p><p><img src="/2019/03/17/AJAX跨域/3.png" alt></p><h4 id="三：-XHR（XMLHttpRequest）请求"><a href="#三：-XHR（XMLHttpRequest）请求" class="headerlink" title="三： XHR（XMLHttpRequest）请求"></a>三： XHR（XMLHttpRequest）请求</h4><p>前端请求的ajax是本地接口，本地接口接受到请求后向实际的接口请求数据，然后再将信息返回给前端【代理方式】</p><p>2.解决思路？？？<br><img src="/2019/03/17/AJAX跨域/4.png" alt><br><img src="/2019/03/17/AJAX跨域/5.png" alt></p>]]></content>
<categories>
<category> javascript </category>
</categories>
</entry>
<entry>
<title>如何自律</title>
<link href="/2019/03/15/%E5%A6%82%E4%BD%95%E8%87%AA%E5%BE%8B/"/>
<url>/2019/03/15/%E5%A6%82%E4%BD%95%E8%87%AA%E5%BE%8B/</url>
<content type="html"><![CDATA[<p>如何自律?</p><ol><li><p>首先要有目标<br>大部分拖延症 ，焦虑，迷茫都是因为没有目标引起的。因为你没有目标，做事没有方向感，注意力不集中。</p></li><li><p>要形成规范化的生活<br>优秀的人之所以优秀，是因为他们的生活已经规范化，他们养成了一个又一个的好习惯，到了某个时间，习惯会推动他们做事，不需要靠意志力。</p></li><li><p>一些精力管理技巧<br>增强意志力 锻炼身体早睡早起<br>提升注意力 番茄工作法<br>冥想<br>排除干扰 切断手机，保持环境干净</p></li></ol>]]></content>
<categories>
<category> 杂文 </category>
</categories>
</entry>
<entry>
<title>Es6</title>
<link href="/2019/03/14/Es6/"/>
<url>/2019/03/14/Es6/</url>
<content type="html"><![CDATA[<p><a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">《ECMAScript 6 入门》阮一峰</a></p><h2 id="1-ES6-let和const命令"><a href="#1-ES6-let和const命令" class="headerlink" title="1.ES6 let和const命令"></a>1.ES6 let和const命令</h2><blockquote><p>ES5只有全局作用域和函数作用域，没有块级作用域</p></blockquote><h2 id="2-ES6-变量的解构赋值"><a href="#2-ES6-变量的解构赋值" class="headerlink" title="2.ES6 变量的解构赋值"></a>2.ES6 变量的解构赋值</h2><blockquote><p>ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）.</p></blockquote><p><strong>用途</strong></p><ul><li>1.变量的交换</li><li>2.从函数返回多个值</li><li>3.函数的参数定义</li><li>4.提出JSON数据</li><li>5.函数参数的默认值</li><li>6.遍历Map结构</li><li>7.输入模块指定的方法</li></ul><h2 id="3-ES6-字符串的扩展"><a href="#3-ES6-字符串的扩展" class="headerlink" title="3.ES6 字符串的扩展"></a>3.ES6 字符串的扩展</h2><ul><li>1.includes(), startsWith(), endsWith()</li><li>2.repeat()</li><li>3.padStart()，padEnd()</li><li>4.模板字符串</li></ul><h2 id="4-ES6-正则的扩展"><a href="#4-ES6-正则的扩展" class="headerlink" title="4.ES6 正则的扩展"></a>4.ES6 正则的扩展</h2><h2 id="5-ES6-数值的扩展"><a href="#5-ES6-数值的扩展" class="headerlink" title="5.ES6 数值的扩展"></a>5.ES6 数值的扩展</h2><h2 id="6-ES6-数组的扩展"><a href="#6-ES6-数组的扩展" class="headerlink" title="6.ES6 数组的扩展"></a>6.ES6 数组的扩展</h2><ul><li>Array.from方法用于将两类对象转为<em>真正的数组</em>：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。<br><strong>实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。</strong></li><li>Array.of方法用于将一组值，转换为数组。</li></ul><h2 id="7-函数的扩展"><a href="#7-函数的扩展" class="headerlink" title="7.函数的扩展"></a>7.函数的扩展</h2><h2 id="8-ES6-对象的扩展"><a href="#8-ES6-对象的扩展" class="headerlink" title="8.ES6 对象的扩展"></a>8.ES6 对象的扩展</h2><h2 id="9-ES6-symbol"><a href="#9-ES6-symbol" class="headerlink" title="9.ES6 symbol"></a>9.ES6 symbol</h2><h2 id="10-ES6-set和map数据结构"><a href="#10-ES6-set和map数据结构" class="headerlink" title="10.ES6 set和map数据结构"></a>10.ES6 set和map数据结构</h2><h2 id="11-Proxy-和-Reflect"><a href="#11-Proxy-和-Reflect" class="headerlink" title="11.Proxy 和 Reflect"></a>11.Proxy 和 Reflect</h2><h2 id="12-Iterator和for…of循环"><a href="#12-Iterator和for…of循环" class="headerlink" title="12.Iterator和for…of循环"></a>12.Iterator和for…of循环</h2><h2 id="13-Generator-函数"><a href="#13-Generator-函数" class="headerlink" title="13.Generator 函数"></a>13.Generator 函数</h2><h2 id="14-ES6-promise对象"><a href="#14-ES6-promise对象" class="headerlink" title="14.ES6 promise对象"></a>14.ES6 promise对象</h2><h2 id="15-ES6-异步操作和async函数"><a href="#15-ES6-异步操作和async函数" class="headerlink" title="15.ES6 异步操作和async函数"></a>15.ES6 异步操作和async函数</h2><h2 id="16-ES6-class"><a href="#16-ES6-class" class="headerlink" title="16.ES6 class"></a>16.ES6 class</h2><h2 id="17-ES6-修饰器Decorator"><a href="#17-ES6-修饰器Decorator" class="headerlink" title="17.ES6 修饰器Decorator"></a>17.ES6 修饰器Decorator</h2><h2 id="18-ES6-module"><a href="#18-ES6-module" class="headerlink" title="18.ES6 module"></a>18.ES6 module</h2><h2 id="19-ES6-编程风格"><a href="#19-ES6-编程风格" class="headerlink" title="19.ES6 编程风格"></a>19.ES6 编程风格</h2>]]></content>
<categories>
<category> javascript </category>
</categories>
</entry>
<entry>
<title>SASS</title>
<link href="/2019/03/12/SASS/"/>
<url>/2019/03/12/SASS/</url>
<content type="html"><![CDATA[<p><a href="https://www.sasscss.com/" target="_blank" rel="noopener">sass中文网</a><br><a href="http://sass-lang.com/" target="_blank" rel="noopener">sass英文</a></p><h3 id="第一步：安装"><a href="#第一步：安装" class="headerlink" title="第一步：安装"></a>第一步：安装</h3><p>参考英文sass官网 两种方式 1. 安装像考拉一样的应用 2.通过命令 安装npm i -g sass （推荐）<br><figure class="highlight bash"><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">$ sass --watch input.scss output.css</span><br><span class="line">或者</span><br><span class="line">$ sass --watch app/sass:public/css 注意监听的路径 冒号</span><br><span class="line">$ npm init -y 安装package.json在 scripts中添加 sass --watch app/sass:public/css</span><br></pre></td></tr></table></figure></p><h3 id="语法syntax"><a href="#语法syntax" class="headerlink" title="语法syntax"></a>语法syntax</h3><ul><li>变量variables</li><li>嵌套Nesting</li><li>Partials</li><li>Important</li><li>Mixins</li><li>Extends/Inhertitance</li><li>Operators</li></ul>]]></content>
<categories>
<category> h5&css3 </category>
</categories>
</entry>
<entry>
<title>H5 新增语义化标签</title>
<link href="/2019/03/12/H5-%E6%96%B0%E5%A2%9E%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE/"/>
<url>/2019/03/12/H5-%E6%96%B0%E5%A2%9E%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE/</url>
<content type="html"><![CDATA[<p><a href="https://www.html.cn/archives/category/xhtmlcss/" target="_blank" rel="noopener">HTML5+css3</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" rel="noopener">HTML</a><br><a href="https://guide.aotu.io/docs/" target="_blank" rel="noopener">凹凸实验室的前端规范</a></p><p><img src="/2019/03/12/H5-新增语义化标签/html5.png" alt="html5 新增语义化标签"></p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line"><header></span><br><span class="line"> <hgroup></span><br><span class="line"> <h1>主标题</h1></span><br><span class="line"> <h2>副标题</h2></span><br><span class="line"> </hgroup></span><br><span class="line"> <mark>header页眉通常包括网站标志、主导航、全站链接以及搜索框。</mark></span><br><span class="line"> </header></span><br><span class="line"></span><br><span class="line"> <nav></span><br><span class="line"> <ul></span><br><span class="line"> <li><a href=<span class="string">"#"</span>>HTML</a></li></span><br><span class="line"> <li><a href=<span class="string">"#"</span>>CSS</a></li></span><br><span class="line"> <li><a href=<span class="string">"#"</span>>JavaScript</a></li></span><br><span class="line"> </ul></span><br><span class="line"> </nav></span><br><span class="line"></span><br><span class="line"> <article></span><br><span class="line"> <header></span><br><span class="line"> <hgroup></span><br><span class="line"> <h1>页面主标题</h1></span><br><span class="line"> <h2>页面副标题</h2></span><br><span class="line"> </hgroup></span><br><span class="line"> </header></span><br><span class="line"> <time datatime=<span class="string">"20190216"</span>>2019.02.16</time></span><br><span class="line"> <p> <code>article</code> 是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。</p></span><br><span class="line"> </article></span><br><span class="line"></span><br><span class="line"> <section></span><br><span class="line"> <h3>这里是section标题...</h3></span><br><span class="line"> <p>这里是section标题对于内内容...</p></span><br><span class="line"> </span><br><span class="line"> <figure></span><br><span class="line"> <img src=<span class="string">"figure.png"</span> alt=<span class="string">"如果无法显示图像，浏览器将显示替代文本"</span> title=<span class="string">"title属性是鼠标划上去显示的内容"</span>></span><br><span class="line"> <figcaption>figure图片描述</figcaption></span><br><span class="line"> </figure></span><br><span class="line"> </span><br><span class="line"> <blockquoto>引述文本，默认新的一行显示</blockquoto></span><br><span class="line"> <address>作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接)</address></span><br><span class="line"> </span><br><span class="line"> <cite></span><br><span class="line">指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。</span><br><span class="line"></cite></span><br><span class="line"></span><br><span class="line"><progress>进度条</progress></span><br><span class="line"></span><br><span class="line"> </section></span><br><span class="line"></span><br><span class="line"> <footer></span><br><span class="line"> <strong>footer页脚，只有当父级是body时，才是整个页面的页脚。</strong></span><br><span class="line"> </footer></span><br></pre></td></tr></table></figure><p>总结：必须执行凹凸实验室的前端规范 HTML标签语义化 命名规范语义化不熟悉的多查手册</p><p>一.HTML5</p><p>1.1 html5 视频 video<br>1.2 html5 音频 audio<br>1.3 html5 拖放 drag drop 几个api 参考手册<br>1.4 html5 canvas 画布<br>1.5 html5 svg 支持内联svg<br>1.6 html5 Geolocation（地理定位）用于定位用户的位置。<br>1.7 html5 web储存 在客户端储存数据 localStorage sessionStorage<br>1.8 html5 应用缓存 application cache<br>1.9 html5 web workers web worker 是运行在后台的 JavaScript，不会影响页面的性能。<br>1.10 html5 服务器发送事件 serve-sent event *** webSocket 服务器推送技术</p><p>WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。</p><p>1.11 html5 新增语义化标签 利于seo<br>1.12 html5 MathML 是数学标记语言<br>1.14 html5 input 拥有多个新的表单输入类型 email color date等。这些新特性提供了更好的输入控制和验证 reqiured min max step等。</p><p>二.CSS3<br>选择器<br>盒模型<br>背景和边框<br>文字特效<br>2D/3D转换<br>动画<br>多列布局<br>用户界面</p>]]></content>
<categories>
<category> h5&css3 </category>
</categories>
</entry>
<entry>
<title>Hexo</title>
<link href="/2019/03/12/Hexo/"/>
<url>/2019/03/12/Hexo/</url>
<content type="html"><![CDATA[<p><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">参考链接hexo.io</a><br><a href="https://github.com/tufu9441/maupassant-hexo" target="_blank" rel="noopener">主题maupassant</a></p><blockquote><p><strong>Hexo</strong> 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p></blockquote><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">$ hexo new [layout] <span class="string">"title"</span> 新建一篇文章</span><br><span class="line">$ hexo server 启动服务器。默认情况下，访问网址为 http://localhost:4000/</span><br><span class="line">$ hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)。</span><br><span class="line">$ hexo generate</span><br><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p><strong>tips</strong></p><ol><li>在文章的front-matter中添加toc: true即可让该篇文章显示目录;</li><li>文章和页面的评论功能可以通过在front-matter中设置comments: true或comments: false来进行开启或关闭（默认开启）。</li><li>在source目录下建立相应名称的文件夹，然后在文件夹中建立index.md文件，并在index.md的front-matter中设置layout为layout: page。若需要单栏页面，就将layout设置为 layout: single-column。</li></ol>]]></content>
<categories>
<category> 工具 </category>
</categories>
</entry>
</search>