-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathatom.xml
667 lines (435 loc) · 114 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>静夜</title>
<subtitle>吾念所归，无惧无退</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="oohyo.github.io/"/>
<updated>2019-04-16T17:10:34.512Z</updated>
<id>oohyo.github.io/</id>
<author>
<name>er567</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>换地方更新</title>
<link href="oohyo.github.io/2019/04/07/%E6%9B%B4%E6%96%B0%E8%AF%B4%E6%98%8E/"/>
<id>oohyo.github.io/2019/04/07/更新说明/</id>
<published>2019-04-06T23:59:59.000Z</published>
<updated>2019-04-16T17:10:34.512Z</updated>
<content type="html"><![CDATA[<p>这个博客是之前还在长沙的时候折腾的 挂在github里（经常加载会很慢），后面来深圳找了工作之后用自己er567.cn这个域名和基友学生身份买的阿里云服务器基于typecho另外搭了一个，主题的话稍微找了下 无意间发现了Pinghsu还挺好看的，于是就换了过去。中间服务器还重置过一次东西都没备份…</p>]]></content>
<summary type="html">
<p>这个博客是之前还在长沙的时候折腾的 挂在github里（经常加载会很慢），后面来深圳找了工作之后用自己er567.cn这个域名和基友学生身份买的阿里云服务器基于typecho另外搭了一个，主题的话稍微找了下 无意间发现了Pinghsu还挺好看的，于是就换了过去。中间服务器还
</summary>
<category term="声明" scheme="oohyo.github.io/categories/%E5%A3%B0%E6%98%8E/"/>
</entry>
<entry>
<title>面试记录</title>
<link href="oohyo.github.io/2018/07/22/%E9%9D%A2%E8%AF%95%E8%AE%B0%E5%BD%95/"/>
<id>oohyo.github.io/2018/07/22/面试记录/</id>
<published>2018-07-21T22:44:21.000Z</published>
<updated>2018-07-21T15:19:55.601Z</updated>
<content type="html"><![CDATA[<ul><li>webpack有哪些配置？用过哪些webpack插件？</li><li>jq插件用过哪些？封装jq插件，原理 </li><li>html5提供了什么存储方式？cookie / localStorage 和 sessionStorage区别<ul><li>共同点：都是保存在浏览器端、且同源的 </li><li>cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 </li><li>存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 </li><li>数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 </li><li>作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 </li><li>web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 </li><li>web Storage的api接口使用更方便</li></ul></li><li>vue有哪些修饰符，阻止默认事件<ul><li>v-model.trim</li><li>v-model.number</li><li>v-model.lazy</li><li>@click.self</li><li>@submit.prevent</li><li>@click.stop</li><li>@keyup.enter/.13</li></ul></li><li>v-if v-show区别，重绘重排区别</li><li>如何加速首页的加载速度,优化点</li></ul><hr><ul><li>vue双向绑定的原理以及具体实现<ol><li>实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。（forEach遍历data属性值，递归；get推入Dep订阅器数组,set数据更新通知所有订阅者）</li><li>实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。</li><li>实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。事件是在compile的里面挂载的。<a id="more"></a></li></ol></li><li>bus传递参数的方法，以及原理</li><li>vue源码解析之事件机制原理）（$on $emit的原理）</li><li>Vue组件是什么数据类型（是个构造函数）</li><li>Vuex state修改有哪些方法？能不能在全局修改state?</li><li>Vuex的mutation action dispatch区别？在mutation使用异步会发生什么？会报错吗？（区分严格模式）</li><li>es6 import和require用法和区别</li></ul><table><thead><tr><th>加载方式</th><th style="text-align:center">规范</th><th style="text-align:center">命令</th><th style="text-align:center">特点</th></tr></thead><tbody><tr><td>运行时加载</td><td style="text-align:center">CommonJS/AMD</td><td style="text-align:center">require</td><td style="text-align:center">社区方案，非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。</td></tr><tr><td>编译时加载</td><td style="text-align:center">es6</td><td style="text-align:center">import</td><td style="text-align:center">语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。</td></tr></tbody></table><ul><li>Vue mixins混入的几种情况，重名了怎么办？</li><li>实现一个闭包和一个构造函数</li><li>圣杯布局的原理以及实现</li><li>css 画三角形的实现和原理（border-width:0 10px 10px 10px; 四条边框的宽度）</li><li>rem自适应原理，根据根元素的字体大小来自适应（html)</li><li>XSS 与 CSRF 两种跨站攻击以及如何防范（cookie的隐患）</li><li>常见正则表达式</li></ul><h3 id="关于this的题"><a href="#关于this的题" class="headerlink" title="关于this的题"></a>关于this的题</h3> <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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> num:<span class="number">8</span>,</span><br><span class="line"> inner: {</span><br><span class="line"> num: <span class="number">6</span>,</span><br><span class="line"> print: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"num: "</span>+num+<span class="string">" , this.num: "</span>+<span class="keyword">this</span>.num);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">num = <span class="number">888</span>;</span><br><span class="line">obj.inner.print(); <span class="comment">//num: 888 , this.num: 6</span></span><br><span class="line"><span class="keyword">var</span> fn = obj.inner.print;</span><br><span class="line">fn(); <span class="comment">//num: 888 , this.num: 888, this: Window</span></span><br><span class="line">(obj.inner.print)(); <span class="comment">//num: 888 , this.num: 6</span></span><br><span class="line">(obj.inner.print = obj.inner.print)(); <span class="comment">//num: 888 , this.num: 888</span></span><br></pre></td></tr></table></figure><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>感觉从长沙出来还是比较仓促，没有好好复习面试题做准备 基础原理方面还是有所欠缺，还是像以前在学校一样裸考肯定是不行..<br>面了4天累得不行（还是有几个offer）可能是身体有点虚QAQ~<br>总的来说问的问题有基础的知识，也有深入到框架的原理，还有业务中的兼容和性能/安全问题，还是都要了解的拉。</p>]]></content>
<summary type="html">
<ul>
<li>webpack有哪些配置？用过哪些webpack插件？</li>
<li>jq插件用过哪些？封装jq插件，原理 </li>
<li>html5提供了什么存储方式？cookie / localStorage 和 sessionStorage区别<ul>
<li>共同点：都是保存在浏览器端、且同源的 </li>
<li>cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 </li>
<li>存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 </li>
<li>数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 </li>
<li>作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 </li>
<li>web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 </li>
<li>web Storage的api接口使用更方便</li>
</ul>
</li>
<li>vue有哪些修饰符，阻止默认事件<ul>
<li>v-model.trim</li>
<li>v-model.number</li>
<li>v-model.lazy</li>
<li>@click.self</li>
<li>@submit.prevent</li>
<li>@click.stop</li>
<li>@keyup.enter/.13</li>
</ul>
</li>
<li>v-if v-show区别，重绘重排区别</li>
<li>如何加速首页的加载速度,优化点</li>
</ul>
<hr>
<ul>
<li>vue双向绑定的原理以及具体实现<ol>
<li>实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。（forEach遍历data属性值，递归；get推入Dep订阅器数组,set数据更新通知所有订阅者）</li>
<li>实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。</li>
<li>实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。事件是在compile的里面挂载的。
</summary>
<category term="面试" scheme="oohyo.github.io/categories/%E9%9D%A2%E8%AF%95/"/>
<category term="css" scheme="oohyo.github.io/tags/css/"/>
<category term="js" scheme="oohyo.github.io/tags/js/"/>
<category term="兼容" scheme="oohyo.github.io/tags/%E5%85%BC%E5%AE%B9/"/>
<category term="框架" scheme="oohyo.github.io/tags/%E6%A1%86%E6%9E%B6/"/>
</entry>
<entry>
<title>一个简易多栏tab组件,以及npm发布</title>
<link href="oohyo.github.io/2018/05/01/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/"/>
<id>oohyo.github.io/2018/05/01/vue学习记录/</id>
<published>2018-05-01T00:00:00.000Z</published>
<updated>2018-05-28T17:37:06.448Z</updated>
<content type="html"><![CDATA[<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>之前h5移动端项目有一个顶部tab栏的组件,那个是基于jq的各种操作dom,现在项目用vue重构,所以便想用vue重构下这个组件.</p><h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><ol><li>先理清需求,把需要自定义配置的参数列出来(tab栏数量,tab栏文字,active颜色,tab栏点击事件..)</li><li>在App.vue里将需要的参数传入组件,在组件内用数据渲染成需要的结构</li><li>最后再完善样式 <a id="more"></a><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2></li></ol><ul><li><p>安装</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install mm-vue-tab</span><br></pre></td></tr></table></figure></li><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Tab <span class="keyword">from</span> <span class="string">'mm-vue-tab'</span></span><br><span class="line">Vue.use(Tab);</span><br></pre></td></tr></table></figure></li><li><p>使用demo</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">mm-vue-tab</span> <span class="attr">:options</span>=<span class="string">"option"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"bd-1"</span>></span>...<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"bd-2"</span>></span>...<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">mm-vue-tab</span>></span></span><br></pre></td></tr></table></figure></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></pre></td><td class="code"><pre><span class="line">option:{</span><br><span class="line"> name: [<span class="string">'导航一'</span>,<span class="string">'导航二'</span>], <span class="comment">//导航名称</span></span><br><span class="line"> lineColor: <span class="string">''</span>, <span class="comment">//默认 #f95d5b</span></span><br><span class="line"> slotName: [<span class="string">'bd-0'</span>,<span class="string">'bd-1'</span>], <span class="comment">//插槽名称</span></span><br><span class="line"> tabClick:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ <span class="comment">//触发导航</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'click tab'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="踩坑"><a href="#踩坑" class="headerlink" title="踩坑"></a>踩坑</h2><ol><li><p>关于npm发布,需要先将项目打包到lib,并且配置好package.json</p><p> “private”: false, //设置为开源<br> “main”: “lib/index.js” //打包路径</p></li><li><p>如果你切换过npm源,发布的时候需要在npm login前切换回来.</p></li><li><p>在你决定正式发布之前应该在本地写demo测试几遍</p></li></ol><h2 id="附录"><a href="#附录" class="headerlink" title="附录"></a>附录</h2><p><a href="http://ofj8a2i7u.bkt.clouddn.com/image/demo.gif" target="_blank" rel="noopener">Demo</a><br><a href="https://github.com/er567/mm-vue-tab" target="_blank" rel="noopener">源码</a></p>]]></content>
<summary type="html">
<h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>之前h5移动端项目有一个顶部tab栏的组件,那个是基于jq的各种操作dom,现在项目用vue重构,所以便想用vue重构下这个组件.</p>
<h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><ol>
<li>先理清需求,把需要自定义配置的参数列出来(tab栏数量,tab栏文字,active颜色,tab栏点击事件..)</li>
<li>在App.vue里将需要的参数传入组件,在组件内用数据渲染成需要的结构</li>
<li>最后再完善样式
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="vue" scheme="oohyo.github.io/tags/vue/"/>
<category term="js" scheme="oohyo.github.io/tags/js/"/>
<category term="npm" scheme="oohyo.github.io/tags/npm/"/>
</entry>
<entry>
<title>黑色星期五-环境爆炸</title>
<link href="oohyo.github.io/2018/03/31/%E7%8E%AF%E5%A2%83%E7%88%86%E7%82%B8/"/>
<id>oohyo.github.io/2018/03/31/环境爆炸/</id>
<published>2018-03-30T23:59:59.000Z</published>
<updated>2019-04-16T17:08:21.430Z</updated>
<content type="html">< --><br>后续:去掉了package.json里的一些无关紧要依赖,将包版本号前面的^去掉了(因为他会去自动下载当前大版本最新的),然后项目缺少的依赖单独安装.<br>tips:看一下有没有少装vue-loader<br><a id="more"></a></p>]]></content>
<summary type="html">
<p>环境爆炸了,原因疑似npm install哪个依赖包出了问题,导致webpack resolve alias不生效了,报错信息说很多依赖没有找到。<br><!--  --><br>后续:去掉了package.json里的一些无关紧要依赖,将包版本号前面的^去掉了(因为他会去自动下载当前大版本最新的),然后项目缺少的依赖单独安装.<br>tips:看一下有没有少装vue-loader<br>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="vue" scheme="oohyo.github.io/tags/vue/"/>
<category term="小程序" scheme="oohyo.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="项目环境" scheme="oohyo.github.io/tags/%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83/"/>
</entry>
<entry>
<title>Linux折腾记录(一)</title>
<link href="oohyo.github.io/2018/03/29/Linux_1/"/>
<id>oohyo.github.io/2018/03/29/Linux_1/</id>
<published>2018-03-28T22:00:00.000Z</published>
<updated>2018-05-19T01:37:22.726Z</updated>
<content type="html"><![CDATA[<p>起因,想在服务器启一个定时任务,每天晚上9点自动去github上拉取最新的代码,然后vue-build编译,想试试水,弄了一下还是踩了蛮多坑的TAT</p><p><strong>1.linux下安装git环境</strong></p><pre><code>yum -y install git</code></pre><p><strong>2.给git账户配置密钥 //生成密钥:ssh-keygen -t rsa -C “邮箱地址”</strong></p><pre><code>cd ~/.ssh/cat id_rsa.pub //将密钥复制添加到你的git账户</code></pre><p><strong>3.clone项目,安装依赖</strong></p><p><strong>4.写python脚本(路径要写绝对路径)</strong></p><p><strong>5.添加定时任务(crontab命令)</strong></p><p><strong>6.执行crond</strong> </p><h3 id="遇到的一些问题"><a href="#遇到的一些问题" class="headerlink" title="遇到的一些问题"></a>遇到的一些问题</h3><h4 id="1-crontab添加了定时任务之后没有crond-start启动"><a href="#1-crontab添加了定时任务之后没有crond-start启动" class="headerlink" title="1.crontab添加了定时任务之后没有crond start启动"></a>1.crontab添加了定时任务之后没有crond start启动</h4><p> /sbin/service crond start //启动服务<br> /sbin/service crond stop //关闭服务<br> /sbin/service crond restart //重启服务<br> /sbin/service crond reload //重新载入配置<br> /sbin/service crond status //查看状态</p><blockquote><p>在执行crond 时提示cron: can’t lock /var/run/crond.pid, otherpid may be 2699: Resource temporarily unavailable;<br>解决方案 rm -rf /var/run/crond.pid<br>重启即可 /etc/init.d/crond restart </p></blockquote><h4 id="2-在定时任务跑python脚本没有环境变量"><a href="#2-在定时任务跑python脚本没有环境变量" class="headerlink" title="2.在定时任务跑python脚本没有环境变量"></a>2.在定时任务跑python脚本没有环境变量</h4><p>搜索了一下,采用shell脚本来执行..</p><h4 id="3-关于shell脚本"><a href="#3-关于shell脚本" class="headerlink" title="3.关于shell脚本"></a>3.关于shell脚本</h4><p>注意要写成绝对路径;注意.sh文件的文件格式(我在window下编辑好上传了一个shell脚本,然后运行报错了,最后发现是文件格式的问题)<br>可以使用:set ff=unix转换文件格式.</p>]]></content>
<summary type="html">
<p>起因,想在服务器启一个定时任务,每天晚上9点自动去github上拉取最新的代码,然后vue-build编译,想试试水,弄了一下还是踩了蛮多坑的TAT</p>
<p><strong>1.linux下安装git环境</strong></p>
<pre><code>yum -y
</summary>
<category term="折腾记录" scheme="oohyo.github.io/categories/%E6%8A%98%E8%85%BE%E8%AE%B0%E5%BD%95/"/>
<category term="linux" scheme="oohyo.github.io/tags/linux/"/>
<category term="centos" scheme="oohyo.github.io/tags/centos/"/>
<category term="定时任务" scheme="oohyo.github.io/tags/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1/"/>
</entry>
<entry>
<title>常见基础&原理问题记录</title>
<link href="oohyo.github.io/2018/03/18/%E5%9F%BA%E7%A1%80&%E5%8E%9F%E7%90%86/"/>
<id>oohyo.github.io/2018/03/18/基础&原理/</id>
<published>2018-03-17T17:30:15.000Z</published>
<updated>2018-05-19T01:37:22.730Z</updated>
<content type="html"><![CDATA[<h4 id="一、js"><a href="#一、js" class="headerlink" title="一、js"></a>一、js</h4><blockquote><p>1.JS引擎<br>2.本地储存和离线缓存<br>3.Javascript实现几种常用的排序算法<br>4.v8sort排序<br>5.闭包,继承,es6,异步 </p></blockquote><h4 id="二、css"><a href="#二、css" class="headerlink" title="二、css"></a>二、css</h4><blockquote><p>1.垂直居中方法<br>2.盒模型<br>3.什么是BFC </p></blockquote><h4 id="三、git"><a href="#三、git" class="headerlink" title="三、git"></a>三、git</h4><blockquote><p>理解merge/rebase的区别<br>分支合并有冲突的情况与解决方法</p></blockquote><h4 id="四、vue"><a href="#四、vue" class="headerlink" title="四、vue"></a>四、vue</h4><blockquote><p>1.双向绑定原理<br>2.虚拟dom原理<br>3.Vue的SSR原理(nuxt)<br>4.webpack异步原理/代码分割</p></blockquote><h4 id="五、算法"><a href="#五、算法" class="headerlink" title="五、算法"></a>五、算法</h4><blockquote><p>1.实现一个JSON.stringify方法<br>2.数组去重/复杂度</p></blockquote>]]></content>
<summary type="html">
<h4 id="一、js"><a href="#一、js" class="headerlink" title="一、js"></a>一、js</h4><blockquote>
<p>1.JS引擎<br>2.本地储存和离线缓存<br>3.Javascript实现几种常用的排序算法<
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="css" scheme="oohyo.github.io/tags/css/"/>
<category term="vue" scheme="oohyo.github.io/tags/vue/"/>
<category term="js" scheme="oohyo.github.io/tags/js/"/>
<category term="浏览器" scheme="oohyo.github.io/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/"/>
</entry>
<entry>
<title>hexo yilia添加相册</title>
<link href="oohyo.github.io/2018/03/04/hexo-yilia%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%9B%B8%E5%86%8C/"/>
<id>oohyo.github.io/2018/03/04/hexo-yilia主题添加相册/</id>
<published>2018-03-04T00:30:00.000Z</published>
<updated>2018-05-19T01:37:22.728Z</updated>
<content type="html"><![CDATA[<p><strong>最终效果：</strong><a href="https://er567.cn/photos/" target="_blank" rel="noopener">https://er567.cn/photos</a> </p><p><strong>参考连接：</strong><a href="http://lawlite.me/2017/04/13/Hexo-Github实现相册功能/" target="_blank" rel="noopener">http://lawlite.me/</a> </p><p>有什么问题可以在下面留言评论或者左边的联系方式问我</p><p>下面大概说一下实现步骤</p><h3 id="1-创建图床"><a href="#1-创建图床" class="headerlink" title="1.创建图床"></a>1.创建图床</h3><p>你可以用你自己的服务器搭一个，也可以使用七牛云，最方便当然还是直接在git上建一个仓库用来存放图片，缺点就是一次性添加图片过多的时候上传会有点慢。</p><h3 id="2-压缩图片并整理图片信息"><a href="#2-压缩图片并整理图片信息" class="headerlink" title="2.压缩图片并整理图片信息"></a>2.压缩图片并整理图片信息</h3><p>这一步需要读取文件，你可以用nodejs,python,php等等都行。主题的作者是用的nodejs,我参考使用的是python。大概实现的功能就是读取原图，压缩图片，将原图和压缩过的图片的信息都整理好存到一个json文件中以便于hexo 主题模板渲染页面使用。</p><h3 id="3-在blog目录中渲染相册页面"><a href="#3-在blog目录中渲染相册页面" class="headerlink" title="3.在blog目录中渲染相册页面"></a>3.在blog目录中渲染相册页面</h3><p>拿到了图片信息json文件后需要编辑相册页面模板，你也可以自定义一些样式。在source目录中创建photos文件夹，在里面编辑ejs,js,css</p><h3 id="4-部署"><a href="#4-部署" class="headerlink" title="4.部署"></a>4.部署</h3><p>以上这些都弄完没问题之后就可以部署上去了(每次更新图片需要跑一下脚本更新json)<br><a id="more"></a></p><h3 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h3><p>在运行python脚本时候你可能会没有环境，简单，对照官网安装配置环境就好了。</p><p>安装PIL => pip install Pillow //图像处理库 </p><p>然后还遇到里字符编码问题，保存的json文件中无法存中文。</p><p>因为Python2中默认的编码方式一般是GBK,需要在处理的中文字符串后.decode(‘gbk’) //将gbk编码的字符串转换成unicode编码</p><p><strong>图片无法显示：</strong></p><p>1.图片后缀是否保存正确<br>2.控制台查看引用的路径是否正确<br>3.图片是否已经成功上传到，并在仓库设置开启git pages</p>]]></content>
<summary type="html">
<p><strong>最终效果：</strong><a href="https://er567.cn/photos/" target="_blank" rel="noopener">https://er567.cn/photos</a> </p>
<p><strong>参考连接：</strong><a href="http://lawlite.me/2017/04/13/Hexo-Github实现相册功能/" target="_blank" rel="noopener">http://lawlite.me/</a> </p>
<p>有什么问题可以在下面留言评论或者左边的联系方式问我</p>
<p>下面大概说一下实现步骤</p>
<h3 id="1-创建图床"><a href="#1-创建图床" class="headerlink" title="1.创建图床"></a>1.创建图床</h3><p>你可以用你自己的服务器搭一个，也可以使用七牛云，最方便当然还是直接在git上建一个仓库用来存放图片，缺点就是一次性添加图片过多的时候上传会有点慢。</p>
<h3 id="2-压缩图片并整理图片信息"><a href="#2-压缩图片并整理图片信息" class="headerlink" title="2.压缩图片并整理图片信息"></a>2.压缩图片并整理图片信息</h3><p>这一步需要读取文件，你可以用nodejs,python,php等等都行。主题的作者是用的nodejs,我参考使用的是python。大概实现的功能就是读取原图，压缩图片，将原图和压缩过的图片的信息都整理好存到一个json文件中以便于hexo 主题模板渲染页面使用。</p>
<h3 id="3-在blog目录中渲染相册页面"><a href="#3-在blog目录中渲染相册页面" class="headerlink" title="3.在blog目录中渲染相册页面"></a>3.在blog目录中渲染相册页面</h3><p>拿到了图片信息json文件后需要编辑相册页面模板，你也可以自定义一些样式。在source目录中创建photos文件夹，在里面编辑ejs,js,css</p>
<h3 id="4-部署"><a href="#4-部署" class="headerlink" title="4.部署"></a>4.部署</h3><p>以上这些都弄完没问题之后就可以部署上去了(每次更新图片需要跑一下脚本更新json)<br>
</summary>
<category term="折腾记录" scheme="oohyo.github.io/categories/%E6%8A%98%E8%85%BE%E8%AE%B0%E5%BD%95/"/>
<category term="hexo" scheme="oohyo.github.io/tags/hexo/"/>
<category term="yilia" scheme="oohyo.github.io/tags/yilia/"/>
<category term="hexo主题" scheme="oohyo.github.io/tags/hexo%E4%B8%BB%E9%A2%98/"/>
</entry>
<entry>
<title>不要随便监听改变浏览记录！</title>
<link href="oohyo.github.io/2018/01/31/%E5%88%AB%E6%94%B9%E5%8F%98%E6%B5%8F%E8%A7%88%E5%99%A8%E8%AE%BF%E9%97%AE%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95/"/>
<id>oohyo.github.io/2018/01/31/别改变浏览器访问历史记录/</id>
<published>2018-01-30T19:00:00.000Z</published>
<updated>2018-05-19T01:37:22.730Z</updated>
<content type="html"><![CDATA[<p>最近在项目中遇到的坑，已填平=-=<br>以后还是尽量别手动强跳页面打乱浏览器访问记录，尽量用原生的返回，性能体验比较好(返回后有缓存除外。</p><h3 id="监听浏览器返回事件"><a href="#监听浏览器返回事件" class="headerlink" title="监听浏览器返回事件"></a>监听浏览器返回事件</h3> <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></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.history.pushState(<span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>);<span class="comment">//兼容</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"popstate"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="comment">//do something </span></span><br><span class="line">},<span class="literal">false</span>);</span><br></pre></td></tr></table></figure><p><strong>注意：</strong>ios8会有bug，页面加载的时候会直接执行监听的内容。</p><p><strong>原因：</strong>浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。<br> <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">var</span> obj = {</span><br><span class="line"> params:{<span class="attr">isRun</span>: <span class="literal">false</span>},</span><br><span class="line"> backTo:{</span><br><span class="line"> <span class="comment">//图一代码段</span></span><br><span class="line"> },</span><br><span class="line"> initBack:{</span><br><span class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line"> self.param.isRun = <span class="literal">false</span>; </span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ self.param.isRun = <span class="literal">true</span>; }, <span class="number">1000</span>); <span class="comment">//延迟1秒 防止微信返回立即执行popstate事件 </span></span><br><span class="line"> self.backTo();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="浏览器缓存问题"><a href="#浏览器缓存问题" class="headerlink" title="浏览器缓存问题"></a>浏览器缓存问题</h3><p>1.如是跳转页面 可以加时间戳<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用</span></span><br><span class="line">timestamp(getReferrer())</span><br></pre></td></tr></table></figure></p><a id="more"></a> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getReferrer</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> referrer = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> referrer = <span class="built_in">window</span>.top.document.referrer;</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">window</span>.parent) {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> referrer = <span class="built_in">window</span>.parent.document.referrer;</span><br><span class="line"> } <span class="keyword">catch</span> (e2) {</span><br><span class="line"> referrer = <span class="string">''</span>;</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> (referrer === <span class="string">''</span>) {</span><br><span class="line"> referrer = <span class="built_in">document</span>.referrer;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> referrer;</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">timestamp</span>(<span class="params">url</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> getTimestamp = <span class="keyword">new</span> <span class="built_in">Date</span>().getTime();</span><br><span class="line"> <span class="keyword">if</span> (url.indexOf(<span class="string">"&timestamp"</span>) > <span class="number">-1</span>) {</span><br><span class="line"> url = url.split(<span class="string">"&timestamp"</span>)[<span class="number">0</span>] + <span class="string">"&timestamp="</span> + getTimestamp;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span>(url.indexOf(<span class="string">"?"</span>) > <span class="number">-1</span>){</span><br><span class="line"> url = url + <span class="string">"&timestamp="</span> + getTimestamp</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> url = url + <span class="string">"?timestamp="</span> + getTimestamp</span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> url;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>2.可以在前页设置cookie或者session，设置标识判断<br><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></pre></td><td class="code"><pre><span class="line">cookie.set(<span class="string">'isDelateBack'</span>, <span class="string">'1'</span>);<span class="comment">//前页 设置cookie</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(cookie.get(<span class="string">'isDelateBack'</span>)==<span class="string">'1'</span>){<span class="comment">//后页 监听cookie,刷新页面(重置状态或清空cookie)</span></span><br><span class="line"> cookie.set(<span class="string">'isDelateBack'</span>,<span class="string">'0'</span>)</span><br><span class="line"> <span class="built_in">window</span>.location.reload();</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>3.缓存机制是浏览器自带的， 不会发起请求和执行js代码。pageshow方法是无效的</p><h3 id="后续"><a href="#后续" class="headerlink" title="后续"></a>后续</h3><ul><li><p>微信小程序自带返回在ios和安卓的区别。</p></li><li><p>新坑，ios11以上，position：fixed弹窗上弹出键盘输入，会导致定位的弹窗错位以及光标错位；换成absolute就好</p></li></ul><blockquote><p>更新于2018.02.09 20:10 (小年夜)</p></blockquote>]]></content>
<summary type="html">
<p>最近在项目中遇到的坑，已填平=-=<br>以后还是尽量别手动强跳页面打乱浏览器访问记录，尽量用原生的返回，性能体验比较好(返回后有缓存除外。</p>
<h3 id="监听浏览器返回事件"><a href="#监听浏览器返回事件" class="headerlink" title="监听浏览器返回事件"></a>监听浏览器返回事件</h3> <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></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.history.pushState(<span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>);<span class="comment">//兼容</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"popstate"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"> <span class="comment">//do something </span></span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong>ios8会有bug，页面加载的时候会直接执行监听的内容。</p>
<p><strong>原因：</strong>浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。<br> <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">var</span> obj = &#123;</span><br><span class="line"> params:&#123;<span class="attr">isRun</span>: <span class="literal">false</span>&#125;,</span><br><span class="line"> backTo:&#123;</span><br><span class="line"> <span class="comment">//图一代码段</span></span><br><span class="line"> &#125;,</span><br><span class="line"> initBack:&#123;</span><br><span class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line"> self.param.isRun = <span class="literal">false</span>; </span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; self.param.isRun = <span class="literal">true</span>; &#125;, <span class="number">1000</span>); <span class="comment">//延迟1秒 防止微信返回立即执行popstate事件 </span></span><br><span class="line"> self.backTo();</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="浏览器缓存问题"><a href="#浏览器缓存问题" class="headerlink" title="浏览器缓存问题"></a>浏览器缓存问题</h3><p>1.如是跳转页面 可以加时间戳<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用</span></span><br><span class="line">timestamp(getReferrer())</span><br></pre></td></tr></table></figure></p>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="小程序" scheme="oohyo.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="h5" scheme="oohyo.github.io/tags/h5/"/>
</entry>
<entry>
<title>小程序嵌h5</title>
<link href="oohyo.github.io/2018/01/27/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%86%85%E5%B5%8Ch5/"/>
<id>oohyo.github.io/2018/01/27/小程序内嵌h5/</id>
<published>2018-01-26T20:02:58.000Z</published>
<updated>2018-05-19T01:37:22.731Z</updated>
<content type="html"><![CDATA[<h3 id="小程序嵌h5"><a href="#小程序嵌h5" class="headerlink" title="小程序嵌h5"></a>小程序嵌h5</h3><pre><code><web-view src="https://www.xxx.com?parmes=data&token=token"></web-view></code></pre><p>在内嵌的h5页面中通过<br>if(window.__wxjs_environment === ‘miniprogram’){}<br>判断当前环境是在h5还是小程序//需要引用JSSDK 1.3.1 以上版本<br>然后在进行相关的逻辑操作，最后带参数返回小程序</p><h3 id="通过url传参"><a href="#通过url传参" class="headerlink" title="通过url传参"></a>通过url传参</h3><pre><code>wx.miniProgram.navigateTo({url:'https:xxx.com?parmes=1&key=2'})onLoad: function (options) { console.log(options);//{parmes=1,key=2}}</code></pre><ul><li><p>当前小程序不支持h5支付流程，只好调相关支付小程序或其他方法</p></li><li><p>目前往里跳转的页面路径最多只能十层</p></li><li><p>待续</p></li></ul>]]></content>
<summary type="html">
<h3 id="小程序嵌h5"><a href="#小程序嵌h5" class="headerlink" title="小程序嵌h5"></a>小程序嵌h5</h3><pre><code>&lt;web-view src=&quot;https://www.xxx.com?par
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="小程序" scheme="oohyo.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="h5" scheme="oohyo.github.io/tags/h5/"/>
</entry>
<entry>
<title>移动端动画</title>
<link href="oohyo.github.io/2018/01/21/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%8A%A8%E7%94%BB%E5%8D%A1%E9%A1%BF/"/>
<id>oohyo.github.io/2018/01/21/移动端动画卡顿/</id>
<published>2018-01-20T23:50:00.000Z</published>
<updated>2018-05-19T01:37:22.733Z</updated>
<content type="html"><![CDATA[<h3 id="一丶jq-zepto-animate-方法"><a href="#一丶jq-zepto-animate-方法" class="headerlink" title="一丶jq/zepto animate()方法"></a>一丶jq/zepto animate()方法</h3><ul><li>可以细化操作，回调方法，但是在移动端（安卓）卡顿</li></ul><h3 id="二丶css3-animation"><a href="#二丶css3-animation" class="headerlink" title="二丶css3 animation"></a>二丶css3 animation</h3><ul><li>可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。</li></ul><h3 id="三丶transform-过渡top-left-导致重绘，手机性能不好时依然卡顿"><a href="#三丶transform-过渡top-left-导致重绘，手机性能不好时依然卡顿" class="headerlink" title="三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿"></a>三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿</h3><ul><li><p>使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。</p></li><li><p>使用transform:translateY/X来移动元素 scale()缩放元素</p></li><li><p>加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速</p></li><li><p>[参考链接]<a href="http://blog.csdn.net/majun0007/article/details/70049070" target="_blank" rel="noopener">http://blog.csdn.net/majun0007/article/details/70049070</a></p></li></ul><h3 id="四丶RequestAnimationFrame"><a href="#四丶RequestAnimationFrame" class="headerlink" title="四丶RequestAnimationFrame"></a>四丶RequestAnimationFrame</h3><p>如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。<br><a href="https://segmentfault.com/a/1190000008246652" target="_blank" rel="noopener">参考链接</a><a href="https://github.com/er567/demo/tree/master/requestAnimationFrame" target="_blank" rel="noopener">代码</a></p><h3 id="五丶遇到的坑"><a href="#五丶遇到的坑" class="headerlink" title="五丶遇到的坑"></a>五丶遇到的坑</h3><ul><li><p>元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;</p></li><li><p>过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。</p><p>解决办法：使用延时器，延迟一点css3动画的执行。</p></li></ul>]]></content>
<summary type="html">
<h3 id="一丶jq-zepto-animate-方法"><a href="#一丶jq-zepto-animate-方法" class="headerlink" title="一丶jq/zepto animate()方法"></a>一丶jq/zepto animate()方法
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="兼容性" scheme="oohyo.github.io/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/"/>
<category term="css3" scheme="oohyo.github.io/tags/css3/"/>
<category term="动画" scheme="oohyo.github.io/tags/%E5%8A%A8%E7%94%BB/"/>
</entry>
<entry>
<title>window nginx配置https相关问题</title>
<link href="oohyo.github.io/2017/12/12/nginx-https/"/>
<id>oohyo.github.io/2017/12/12/nginx-https/</id>
<published>2017-12-11T18:00:01.000Z</published>
<updated>2018-05-19T01:37:22.728Z</updated>
<content type="html"><![CDATA[<ol><li>[emerg] BIO_new_file(“/usr/local/nginx/conf/cert/214291778530222.pem”) failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen(‘/usr/local/nginx/conf/cert/214291778530222.pem’,’r’) error:2006D080:BIO routines:BIO_new_file:no such file) failed. </li></ol><p>=>原因未知，将证书和key的路径改成相对路径就可以了</p><ol start="2"><li>[emerg] shared zone “SSL” has no equal addresses: 02CC0000 vs 02CB0000</li></ol><p>=>错误原因：ssl_protocols SSLv2 SSLv3 TLSv1 应该是协议配置的问题<br>=>解决办法：ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;</p><ol start="3"><li>如果是include vhost里的配置，则vhost里的conf配置也要加上listen 443;</li></ol>]]></content>
<summary type="html">
<ol>
<li>[emerg] BIO_new_file(“/usr/local/nginx/conf/cert/214291778530222.pem”) failed (SSL: error:02001002:system library:fopen:No such fil
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="前端" scheme="oohyo.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
<category term="nginx" scheme="oohyo.github.io/tags/nginx/"/>
</entry>
<entry>
<title>解决 Windows 下 VSCode 运行 Python 程序的中文乱码问题</title>
<link href="oohyo.github.io/2017/11/29/VScode%E7%BB%88%E7%AB%AF%E4%B9%B1%E7%A0%81/"/>
<id>oohyo.github.io/2017/11/29/VScode终端乱码/</id>
<published>2017-11-28T18:30:00.000Z</published>
<updated>2018-05-19T01:37:22.726Z</updated>
<content type="html"><![CDATA[<h3 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h3><p>Windows 下的 cmd 和 powershell 默认是 GBK 编码显示输出内容， 这导致使用 UTF-8 的 Python 程序中的中文内容（包括注释、文档、和字符串字面量）会以不正确的解码方式输出成乱码内容。</p><h3 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h3><p>Windows 内置了一个叫 “chcp” 的命令，它可以修改要显示的字符集编码的编号。UTF-8 的编号是 65001，所以启动 cmd 或者 powershell 以后可以手动输入：chcp 65001来改变编码。 </p><p>启动 powershell 的时候带上修改编码的参数: “chcp.com 65001” 即可做到自动设置编码。设置如下:<br><a id="more"></a><br>选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存：</p><pre><code>"terminal.integrated.shellArgs.windows": ["-NoExit", "/c", "chcp 65001"]</code></pre><p>但是注意：仅靠修改代码页编号在 cmd 下仍然无法正常显示中文，需要进一步修改字体（有待考证）。<br>ps:(当我用默认的cmd,没换成poweshell时候,)<br>所以没有管 cmd 了，因为在 powershell 下是正常的。</p><p><strong>修改 Terminal</strong></p><p>选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存：</p><pre><code>"terminal.integrated.shell.windows": "C:\\WINDOWS\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"</code></pre><h3 id="附参考链接："><a href="#附参考链接：" class="headerlink" title="附参考链接："></a>附参考链接：</h3><p><a href="https://blog.bluerain.io/p/Windows-Terminal-Coding.html" target="_blank" rel="noopener">蓝雨博客</a></p>]]></content>
<summary type="html">
<h3 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h3><p>Windows 下的 cmd 和 powershell 默认是 GBK 编码显示输出内容， 这导致使用 UTF-8 的 Python 程序中的中文内容（包括注释、文档、和字符串字面量）会以不正确的解码方式输出成乱码内容。</p>
<h3 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h3><p>Windows 内置了一个叫 “chcp” 的命令，它可以修改要显示的字符集编码的编号。UTF-8 的编号是 65001，所以启动 cmd 或者 powershell 以后可以手动输入：chcp 65001来改变编码。 </p>
<p>启动 powershell 的时候带上修改编码的参数: “chcp.com 65001” 即可做到自动设置编码。设置如下:<br>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="python" scheme="oohyo.github.io/tags/python/"/>
</entry>
<entry>
<title>Python学习笔记(一)</title>
<link href="oohyo.github.io/2017/11/25/pyhton%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0(%E4%B8%80)/"/>
<id>oohyo.github.io/2017/11/25/pyhton学习笔记(一)/</id>
<published>2017-11-24T16:42:00.000Z</published>
<updated>2018-05-19T01:37:22.728Z</updated>
<content type="html"><![CDATA[<h3 id="一、环境搭建"><a href="#一、环境搭建" class="headerlink" title="一、环境搭建"></a>一、环境搭建</h3><h4 id="基础环境"><a href="#基础环境" class="headerlink" title="基础环境"></a>基础环境</h4><p><a href="https://www.python.org/" target="_blank" rel="noopener">https://www.python.org/</a> 下载python3.x安装包</p><p>安装好，并添加至系统环境变量。</p><h4 id="虚拟环境virtualenv"><a href="#虚拟环境virtualenv" class="headerlink" title="虚拟环境virtualenv"></a>虚拟环境virtualenv</h4><ol><li>pip install virtualenv </li><li>cd 到一个你想创建的目录路径</li><li>virtualenv venv 环境名称</li></ol><h3 id="二、基本语法"><a href="#二、基本语法" class="headerlink" title="二、基本语法"></a>二、基本语法</h3><p>python对缩进要求非常严格，</p><p>如果格式有误则会抛出类似‘IndentationError: unexpected indent’的错误。</p><p>空格与tab不能混用，否则会报错。所以还是用两个空格吧><</p><a id="more"></a><h4 id="数字"><a href="#数字" class="headerlink" title="数字"></a>数字</h4><ol><li>正常的+，-，*，/，取余%和js都是一样的；</li><li>除法（/）永远返回一个浮点数 15/3=5.0</li><li>如果想取整可以使用（//）运算符 17//3=5</li><li>计算幂乘方使用（**） 5**2=25</li><li>交互模式中，最近一个表达式的值会赋给变量（_），这是一个系统内置变量</li></ol><h4 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h4><ol><li>和js一样，单引号‘’，双引号“”都可以表示字符串，\ 用来转义。</li><li>print() 函数生成可读性更好的输出, 它会省去引号并且打印出转义后的特殊字符</li><li>如果字符串中的\字符被当作特殊字符，可以使用原始字符串，在第一个引号前加r</li></ol><p>>>> print(‘C:\some\name’) # here \n means newline!<br>C:\some<br>ame<br>>>> print(r’C:\some\name’) # note the r before the quote<br>C:\some\name</p><ol start="4"><li>三个引号表示多行字符串文本，行尾的换行符会被自动包含在字符串中，可以在行尾加\来避免换行。</li><li>字符串拼接用+，重复字符串用*；</li></ol><p>>>> 3 * ‘un’ + ‘ium’<br>‘unununium’</p><ol start="6"><li>python相邻的字符串会自动连接，但字符串和变量不会自动连。</li></ol><p>>>> text = (‘Put several strings within parentheses ‘<br>‘to have them joined together.’)<br>>>> text<br>‘Put several strings within parentheses to have them joined together.’</p><ol start="7"><li>字符串自带索引，左边从0开始，负数则从最后一个字符开始。</li><li>字符串自带切片,’Python’[0:2] = ‘Py’;</li></ol><p>s[:i] + s[i:] 永远等于 s ; ‘Python’[:2] + ‘Python’[2:] = ‘Python’</p><ol start="9"><li>len(str) 内置函数返回字符串长度</li></ol>]]></content>
<summary type="html">
<h3 id="一、环境搭建"><a href="#一、环境搭建" class="headerlink" title="一、环境搭建"></a>一、环境搭建</h3><h4 id="基础环境"><a href="#基础环境" class="headerlink" title="基础环境"></a>基础环境</h4><p><a href="https://www.python.org/" target="_blank" rel="noopener">https://www.python.org/</a> 下载python3.x安装包</p>
<p>安装好，并添加至系统环境变量。</p>
<h4 id="虚拟环境virtualenv"><a href="#虚拟环境virtualenv" class="headerlink" title="虚拟环境virtualenv"></a>虚拟环境virtualenv</h4><ol>
<li>pip install virtualenv </li>
<li>cd 到一个你想创建的目录路径</li>
<li>virtualenv venv 环境名称</li>
</ol>
<h3 id="二、基本语法"><a href="#二、基本语法" class="headerlink" title="二、基本语法"></a>二、基本语法</h3><p>python对缩进要求非常严格，</p>
<p>如果格式有误则会抛出类似‘IndentationError: unexpected indent’的错误。</p>
<p>空格与tab不能混用，否则会报错。所以还是用两个空格吧&gt;&lt;</p>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="python" scheme="oohyo.github.io/tags/python/"/>
</entry>
<entry>
<title>ibeacons管理后台</title>
<link href="oohyo.github.io/2017/11/11/ibeacons%E5%90%8E%E5%8F%B0/"/>
<id>oohyo.github.io/2017/11/11/ibeacons后台/</id>
<published>2017-11-11T11:11:11.000Z</published>
<updated>2018-05-19T01:37:22.728Z</updated>
<content type="html"><![CDATA[<p>       最近写了一个ibeacons管理后台,用到了很多新的东西，也踩了很多坑，就写下来记录回顾一下吧。</p><p><strong>效果图:</strong> </p><p><img src="https://t1.aixinxi.net/o_1bvmkgrdh14ls1uuqkmr1n08udja.png-w.jpg" alt="pic"> </p><a id="more"></a><p><img src="https://t1.aixinxi.net/o_1bvmkgedh17apcrp22m5og1ejba.png-w.jpg" alt="pic"> </p><p><img src="https://t1.aixinxi.net/o_1bvmka53i1to3g4gonbnbmh1aa.png-w.jpg" alt="pic"></p><h3 id="1、Techniques-used"><a href="#1、Techniques-used" class="headerlink" title="1、Techniques used"></a>1、Techniques used</h3><ul><li><a href="http://www.layui.com/" target="_blank" rel="noopener">layui</a> (phper推荐的,mmp)</li><li><a href="http://lab.jakiestfu.com/contextjs/" target="_blank" rel="noopener">context.js</a> (自定义右键菜单)</li><li><a href="https://www.hcharts.cn/" target="_blank" rel="noopener">highcharts</a>,<a href="http://echarts.baidu.com/" target="_blank" rel="noopener">echarts</a> (可视化图表)</li><li>等等还有一些其他东西</li></ul><h3 id="2、Problem"><a href="#2、Problem" class="headerlink" title="2、Problem"></a>2、Problem</h3><ol><li>layui自称是一个模块化框架，首先引用它就和我们用的RequireJS模块加载器冲突了。</li></ol><p>解决办法：<br>在app.js里需要配置路径，然后shim导出，然后在文件中还需要配置layui的指向<br><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></pre></td><td class="code"><pre><span class="line">layui.config({</span><br><span class="line"> dir: <span class="string">'//s1.bbgstatic.com/beacon-manager/js/plug/layui/'</span>,</span><br><span class="line"> debug: <span class="literal">false</span> <span class="comment">//</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure></p><ol start="2"><li><p>layui里一些东西无法灵活的配置，满足你的需求，这个没办法，不好用就不用呗</p></li><li><p>柱状图x轴条数过多，倾斜，默认超出会自适应的滚动条的</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></pre></td><td class="code"><pre><span class="line">xAxis: {</span><br><span class="line"> min: <span class="number">0</span>,</span><br><span class="line"> max :<span class="number">10</span>,</span><br><span class="line"> type: <span class="string">'category'</span>,</span><br><span class="line"> labels: {</span><br><span class="line"> rotation: <span class="number">-45</span>,</span><br><span class="line"> style: {</span><br><span class="line"> fontSize: <span class="string">'13px'</span>,</span><br><span class="line"> fontFamily: <span class="string">'Verdana, sans-serif'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>一些正则和逻辑判断，continue break return</p></li></ol><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> urlData.conf){</span><br><span class="line"> <span class="keyword">var</span> _weight = urlData.conf[i].urlList[<span class="number">0</span>].weights;</span><br><span class="line"> <span class="keyword">var</span> _url = urlData.conf[i].urlList[<span class="number">0</span>].url;</span><br><span class="line"> <span class="keyword">if</span>(_weight==<span class="string">''</span>&&_url==<span class="string">''</span>){<span class="comment">//为空就跳过，验证下一行</span></span><br><span class="line"> <span class="keyword">continue</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">if</span>(_weight<<span class="number">0</span>||_weight><span class="number">100</span>||!(<span class="regexp">/^\d+$/</span>.test(_weight))){ </span><br><span class="line"> weightBoolean = <span class="literal">false</span>;<span class="keyword">break</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> weightBoolean = <span class="literal">true</span>;</span><br><span class="line"> <span class="keyword">if</span>(!<span class="regexp">/https?:\/{2}[^\s]*/</span>.test(_url)){</span><br><span class="line"> urlBoolean = <span class="literal">false</span>;<span class="keyword">break</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> urlBoolean = <span class="literal">true</span>;<span class="keyword">continue</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><pre><code class="javascript"><span class="keyword">if</span>(!weightBoolean){ layer.msg(<span class="string">'权重请输入1-100的正整数！'</span>, { <span class="attr">icon</span>: <span class="number">5</span>}) <span class="keyword">return</span>;}<span class="keyword">if</span>(!urlBoolean){ layer.msg(<span class="string">'url格式输入有误，请检查后重新输入！'</span>, { <span class="attr">icon</span>: <span class="number">5</span>}) <span class="keyword">return</span>;}</code></pre><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>       技术选型很重要，以后不要选layui这种啦。</p>]]></content>
<summary type="html">
<p>&#160; &#160; &#160; &#160;最近写了一个ibeacons管理后台,用到了很多新的东西，也踩了很多坑，就写下来记录回顾一下吧。</p>
<p><strong>效果图:</strong> </p>
<p><img src="https://t1.aixinxi.net/o_1bvmkgrdh14ls1uuqkmr1n08udja.png-w.jpg" alt="pic"> </p>
</summary>
<category term="工作笔记" scheme="oohyo.github.io/categories/%E5%B7%A5%E4%BD%9C%E7%AC%94%E8%AE%B0/"/>
<category term="layui" scheme="oohyo.github.io/tags/layui/"/>
<category term="后台" scheme="oohyo.github.io/tags/%E5%90%8E%E5%8F%B0/"/>
</entry>
<entry>
<title>绝地求生攻略</title>
<link href="oohyo.github.io/2017/09/21/chiji/"/>
<id>oohyo.github.io/2017/09/21/chiji/</id>
<published>2017-09-20T18:00:00.000Z</published>
<updated>2018-05-19T01:37:22.727Z</updated>
<content type="html"><![CDATA[<h3 id="资源-amp-载具"><a href="#资源-amp-载具" class="headerlink" title="资源&载具"></a>资源&载具</h3><p><img src="http://om1a60efb.bkt.clouddn.com/image/chiji/ziyuan.png" alt="资源"></p><h3 id="基础操作"><a href="#基础操作" class="headerlink" title="基础操作"></a>基础操作</h3><ul><li><p>跳伞未开伞，视角往下按住W加速垂直下落，可以比其他人提前到达。</p></li><li><p>跳伞未开伞，视角向前，保持125km/h速度，按住w，可以尽量飞得远。</p></li><li><p>松开W按等号键自动奔跑，按住ALt键自由观看，可以在自动奔跑时观察周围。</p></li><li><p>V切换第一/第三人称，第一人称更适合瞄准，第三人称适合观察。</p></li><li><p>持枪单击右键使用第一人称瞄准（使用瞄准镜的话只有单击右键才能看到）按住右键虚拟准星第三人称瞄准。</p></li><li><p>滚轮可以切换武器。</p></li><li><p>Tab键可以捡周围物品，右键点击周围物品快速拾取，在东西杂乱的地方好用。</p></li><li><p>右键背包里的配件可以自动装在武器栏配件里。</p></li><li><p>Q，E可以微微探头。</p></li><li><p>丢物品时按住ctrl可以选择数量。</p></li><li><p><strong>密位</strong>Pg，up，Pg，down可以在有倍数瞄准镜的情况下调整校正。</p></li></ul><a id="more"></a><ul><li><p>拿到枪要换子弹..此时不能奔跑。</p></li><li><p>T是附近/队伍语音。</p></li><li><p>开镜/机瞄时按<strong>shift屏息</strong>，稳定准星，无倍数镜时增加微量放大倍数。必须在静止不动时使用（神迹，用全息红点也能打很准很远）也可以用做望远镜。</p></li><li><p>步行时<strong>ctrl静步</strong>,游泳时ctrl下降空格上浮，游泳也可以用等号自动游。</p></li><li><p>驾驶车辆，快艇时按shift提速，会微微增加油耗。</p></li><li><p>载具中，ctrl+1/2/3/4在车里切换座位，1为驾驶2为副驾驶，行驶中亦可使用，主要用于队友司机被击倒之后恢复对车辆控制。</p></li><li><p>投掷类右键瞄准拉环，左键丢出，请不要按住右键不放手。</p></li><li><p>1、7条旁边有队友时候请格外小心。</p></li><li><p>B切换枪的单发和连射模式，突击步枪蹲人的时候切换成连发比较占便宜，但是后坐力很大。</p></li></ul><h3 id="枪支-amp-amp-配件"><a href="#枪支-amp-amp-配件" class="headerlink" title="枪支&&配件"></a>枪支&&配件</h3><p><strong>狙击枪：</strong></p><p> AWM：伤害和射程之王，三级头也是一枪倒。</p><p> M24：不输AWM的一把狙击，二级头及以下一枪。</p><p> Kar98(karabiner，98，Kruz)：二战手动步枪，每一发.射击后要拉栓，一级及无.头一枪击杀，2级头一发99。</p><p> SKS：连狙，打头的击杀能力与Kar98差不多，身体要略逊一筹，10发弹匣，对枪法有自信的人近战可以当AK用。</p><p> 除AWM用.300马格南，其他都是7.26。</p><p> AWM，与M24只能在补给箱获得。</p><p> 狙击枪：你一个新手还能拿到？拿到能用就行啦。</p><p><strong>突击步枪：</strong></p><p> AKM口径大，伤害最高。</p><p> M16A4，射速最快。</p><p> M416，配件项目最多。</p><p> SCAR没有最好的地方，各项数据平均。</p><p><strong>新手玩家推荐：</strong></p><p> 优先级</p><p> 手枪P1911</p><p> 霰弹枪S12K</p><p> 冲锋枪UMP9</p><p> 突击步枪：有什么拿什么兄弟！</p><p><strong>手枪：</strong><br> R1895：与AK一样口径的手枪，威力直追AK，缺点是怕3级防具与换弹速度慢。枪法自信的人可以初期清理附近的人使用，初期没有高级护甲2-3枪可以杀人。</p><p> P1911：很平均，新手可用，.45子弹。</p><p> P92：伤害最低射速最快，如果能中三枪，枪法好的人可用，不过初期杀人要三枪打底。</p><p><strong>霰弹枪：</strong></p><p> S686：两发一个弹匣，有少量的中距离能力，大概在一个房子的距离之内。</p><p> S1897：亮点在于五发弹匣，伤害很足，距离和稳定性差，打纯优势战斗（对方实力不足/单发手枪/S686）的时候可以用，冲房子的时候推荐S12K。</p><p> S12K：五发弹匣，连喷，有中距离能力，近战之王，最多两枪一个，推荐清屋子，巷战侧翼包抄使用。</p><p><strong>冲锋枪：</strong></p><p> Uzi：乌兹，总体数据不如UMP9，射速稍快，而且较为稀有，不推荐，不过经常看到Uzi的枪托。</p><p> UMP9：中规中矩，近战打头拼命伤害还是很足的，2级头三枪撂倒。</p><p> 汤普森：.45手枪子弹，射速全游戏最高，100弹匣，有效范围直追突击步枪，适合近中距离作战，只能在补给里获得。</p><p><strong>握把</strong> <br> 垂直握把减少枪口的上下后坐力，直角握把能减少上下的后坐力与左右飘的后坐力，但是没有垂直效果明显，不知道为什么游戏数据装配垂直握把会没有增强属性，战术握把，M416专用，增加稳定性。</p><p><strong>枪尾</strong></p><p> 子弹袋，分为Kar98用和霰弹枪用，作用和QuickDraw，相同，减少换弹时间和取枪速度，托腮板，增加稳定性，应该是只有狙击有这个。</p><p> 瞄准镜我就不细说了，15x只有补给有，8x4x和无倍数都能在各处找到。红点和全息我推荐红点，全息的圈圈阻挡视野。</p><p><strong>枪口：</strong></p><p> 消焰器、消音器、补偿器、扼流圈</p><p> 消焰器顾名思义，消除枪口火焰，让你更难被发现，同时开高配时候机瞄会有枪口火焰阻挡视野，可以增加击杀几率，讲道理，低配真的没用。</p><p> 消音器，效果非常好，然而找。到合适的真的很难，这游戏由于做了超音速子弹音效，本身就比较难靠枪声判定方位，加了消音器几乎是隐身击杀</p><p> 扼流圈，只有霰弹枪能用，集中射击范围，相当于勉强增加了射程，有就带上。</p><p> 补偿器，降低后坐力，连发时效果中等。</p><p> 消音>补偿>消焰</p><p><strong>弹夹</strong></p><p> QuickDraw，单看属性，加的是射速，但实际上，是增加换弹速度，和，取枪速度。</p><p> 快速弹夹，提高换弹速度。</p><p> 扩容弹夹，能给百分之三十的容量，扩充，其实很有用，连续作战能力好。</p><p> 双弹夹，是兼容，两项的，好东西，优先级，一定是，双弹夹>，扩容，快速</p>]]></content>
<summary type="html">
<h3 id="资源-amp-载具"><a href="#资源-amp-载具" class="headerlink" title="资源&amp;载具"></a>资源&amp;载具</h3><p><img src="http://om1a60efb.bkt.clouddn.com/image/chiji/ziyuan.png" alt="资源"></p>
<h3 id="基础操作"><a href="#基础操作" class="headerlink" title="基础操作"></a>基础操作</h3><ul>
<li><p>跳伞未开伞，视角往下按住W加速垂直下落，可以比其他人提前到达。</p>
</li>
<li><p>跳伞未开伞，视角向前，保持125km/h速度，按住w，可以尽量飞得远。</p>
</li>
<li><p>松开W按等号键自动奔跑，按住ALt键自由观看，可以在自动奔跑时观察周围。</p>
</li>
<li><p>V切换第一/第三人称，第一人称更适合瞄准，第三人称适合观察。</p>
</li>
<li><p>持枪单击右键使用第一人称瞄准（使用瞄准镜的话只有单击右键才能看到）按住右键虚拟准星第三人称瞄准。</p>
</li>
<li><p>滚轮可以切换武器。</p>
</li>
<li><p>Tab键可以捡周围物品，右键点击周围物品快速拾取，在东西杂乱的地方好用。</p>
</li>
<li><p>右键背包里的配件可以自动装在武器栏配件里。</p>
</li>
<li><p>Q，E可以微微探头。</p>
</li>
<li><p>丢物品时按住ctrl可以选择数量。</p>
</li>
<li><p><strong>密位</strong>Pg，up，Pg，down可以在有倍数瞄准镜的情况下调整校正。</p>
</li>
</ul>
</summary>
<category term="游戏" scheme="oohyo.github.io/categories/%E6%B8%B8%E6%88%8F/"/>
<category term="随笔" scheme="oohyo.github.io/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>css4新特性</title>
<link href="oohyo.github.io/2017/08/23/css4/"/>
<id>oohyo.github.io/2017/08/23/css4/</id>
<published>2017-08-23T13:50:00.000Z</published>
<updated>2018-05-19T01:37:22.727Z</updated>
<content type="html"><![CDATA[<ol><li><a href="http://css4-selectors.com/selector/css4/negation-pseudo-class/" target="_blank" rel="noopener">:not</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:not(s1, s2, ...) {}</span><br></pre></td></tr></table></figure><blockquote><p>在css3中仅能匹配一个选择器,css4中可以匹配多个;</p></blockquote><blockquote><p>:not([data-xxx=”xx”],[data-xxx=”xxx”]);</p></blockquote><blockquote><p>可以用:not()来提高优先级 e.g .negation:not(p){ color:blue; } .negation { color: black; }</p></blockquote><blockquote><p>仅支持safari</p></blockquote><ol start="2"><li><a href="http://css4-selectors.com/selector/css4/matches-any-pseudo-class/" target="_blank" rel="noopener">:matches</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">E:matches(s1, s2) {}</span><br><span class="line">E:-webkit-any(s1, s2, ...) {}</span><br><span class="line">E:-moz-any(s1, s2, ...) {}</span><br></pre></td></tr></table></figure><blockquote><p>意义与:not()相反,匹配对应选择器,简化重复的规则</p></blockquote><blockquote><p>:matches(span, div) :matches(span, div) {}</p></blockquote><blockquote><p>支持大部分主流浏览器,不支持ie和Edge(win10内置浏览器)</p></blockquote><ol start="3"><li><a href="http://css4-selectors.com/selector/css4/relational-pseudo-class/" target="_blank" rel="noopener">:has</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:has(rs1, rs2, ...)</span><br></pre></td></tr></table></figure><blockquote><p>包含伪类选择器,匹配选择器</p></blockquote><blockquote><p>暂时没有浏览器支持</p></blockquote><a id="more"></a><ol start="4"><li><a href="http://css4-selectors.com/selector/css4/attribute-case-sensitivity/" target="_blank" rel="noopener">E:[foo=”bar” i]</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:[foo=<span class="string">"bar"</span> i]{}</span><br></pre></td></tr></table></figure><blockquote><p>属性选择器,忽略大小写</p></blockquote><blockquote><p>不支持ie,Edge和Chrome for Mobile</p></blockquote><ol start="5"><li><a href="http://css4-selectors.com/selector/css4/dir-pseudo-class/" target="_blank" rel="noopener">:dir</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:dir(ltr/rtl){}</span><br></pre></td></tr></table></figure><blockquote><p>根据文本方向匹配,从左到右或者从右到左 </p></blockquote><blockquote><p>[dir=…]无法匹配到没显示声明 dir 的元素,:dir()可以</p></blockquote><blockquote><p>仅支持Firefox</p></blockquote><ol start="6"><li><a href="http://css4-selectors.com/selector/css4/lang-pseudo-class/" target="_blank" rel="noopener">:lang</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:lang(*-CA) {}</span><br></pre></td></tr></table></figure><blockquote><p>在css2中就被添加,css4中新增了通配符</p></blockquote><blockquote><p>暂时木有浏览器支持 </p></blockquote><ol start="7"><li><a href="http://css4-selectors.com/selector/css4/hyperlink-pseudo-class/" target="_blank" rel="noopener">:any-link</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">E:any-link {}</span><br><span class="line">E:-webkit-any-link {}</span><br><span class="line">E:-moz-any-link {}</span><br></pre></td></tr></table></figure><blockquote><p>超链接伪类选择器,只要a有href就能匹配,在以前只能a[href=value]</p></blockquote><blockquote><p>支持大部分主流浏览器,不支持ie和Edge </p></blockquote><ol start="8"><li><a href="http://css4-selectors.com/selector/css4/scope-pseudo-class/" target="_blank" rel="noopener">:scope</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:scope() {}</span><br></pre></td></tr></table></figure><blockquote><p>样式范围伪类选择器,style scope的父元素以内的范围</p></blockquote><blockquote><p>持大部分主流浏览器,不支持ie和Edge </p></blockquote><ol start="9"><li><a href="http://css4-selectors.com/selector/css4/time-dimensional-pseudo-class/" target="_blank" rel="noopener">:current / :past / :future</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">E:current(s1, s2, ...) {}</span><br><span class="line">E:past(s1, s2, ...) {}</span><br><span class="line">E:future(s1, s2, ...) {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配当前,过去和未来的伪类选择器,类似歌词/字幕</p><p><track> 给媒体元素规定外部文本轨道，当媒体播放时，这些文件可见<br>暂时没有浏览器支持 </p></blockquote><ol start="10"><li><a href="http://css4-selectors.com/selector/css4/drop-pseudo-class/" target="_blank" rel="noopener">:drop</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:drop(active || valid || invalid) {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配被拖动元素覆盖的元素(状态) </p></blockquote><blockquote><p>暂时没有浏览器支持 </p></blockquote><ol start="11"><li><a href="http://css4-selectors.com/selector/css4/indeterminate-value-pseudo-class/" target="_blank" rel="noopener">:indeterminate</a> </li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:indeterminate {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配不确定的元素,如Checkbox & radio,默认只有两种状态checked unchecked,<br>需要用js赋第三种状态document.querySelector(‘#id’).indeterminate = true;<br>支持所有主流浏览器</p></blockquote><ol start="12"><li><a href="http://css4-selectors.com/selector/css4/default-option-pseudo-class/" target="_blank" rel="noopener">:default</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:<span class="keyword">default</span> {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配默认元素的伪类选择器,一组相近的ui元素中默认的,form表单的第一个按钮</p></blockquote><blockquote><p>不支持ie和Edge浏览器 </p></blockquote><ol start="13"><li><a href="http://css4-selectors.com/selector/css4/range-pseudo-class/" target="_blank" rel="noopener">Validity</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:valid {}</span><br><span class="line">E:invalid {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配input&form元素有效还是无效,e.g input type=’mail’ > input type=’tel’ </p></blockquote><blockquote><p>兼容所有主流浏览器</p></blockquote><ol start="14"><li><a href="http://css4-selectors.com/selector/css4/validity-pseudo-class/" target="_blank" rel="noopener">Range</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:<span class="keyword">in</span>-range {}</span><br><span class="line">E:out-<span class="keyword">of</span>-range {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配input的值是否在规定范围区间</p></blockquote><blockquote><p>兼容主流浏览器,除了ie</p></blockquote><ol start="15"><li><a href="http://css4-selectors.com/selector/css4/optionality-pseudo-class/" target="_blank" rel="noopener">Optionality</a>可选性</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:required {}</span><br><span class="line">E:optional {}</span><br></pre></td></tr></table></figure><blockquote><p>可选性伪类选择器,匹配表单内input是否必选</p></blockquote><blockquote><p>兼容所有主流浏览器 </p></blockquote><ol start="16"><li><a href="http://css4-selectors.com/selector/css4/range-pseudo-class/" target="_blank" rel="noopener">:user-error</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:user-error {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配:invalid, :out-of-range, or empty :required,当用户与元素有了交互才能生效 </p></blockquote><blockquote><p>不兼容所有浏览器. </p></blockquote><ol start="18"><li><a href="http://css4-selectors.com/selector/css4/mutability-pseudo-class/" target="_blank" rel="noopener">:read-only / :read-write</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:read-only {}</span><br><span class="line">E:read-write {}</span><br></pre></td></tr></table></figure><blockquote><p>前者匹配不能编辑的元素比如p,span,h1,h2..;后者匹配可编辑元素 contenteditable=”true”的元素.input textarea等</p></blockquote><blockquote><p>不支持ie和Safari for mobile,Opera for mobile </p></blockquote><ol start="19"><li><a href="http://css4-selectors.com/selector/css4/placeholder-pseudo-class/" target="_blank" rel="noopener">Placeholder-Shown</a></li></ol><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></pre></td><td class="code"><pre><span class="line">E:placeholder-shown { <span class="comment">/* Style properties */</span> }</span><br><span class="line">E::-webkit-input-placeholder { <span class="comment">/* Chrome, Safari, Opera */</span> }</span><br><span class="line">E::-moz-placeholder { <span class="comment">/* Firefox */</span> }</span><br><span class="line">E:-ms-input-placeholder { <span class="comment">/* IE */</span> }</span><br></pre></td></tr></table></figure><blockquote><p>匹配有占位字符的输入框,给占位字符设置样式</p></blockquote><blockquote><p>兼容所有主流浏览器 </p></blockquote><ol start="20"><li><a href="http://css4-selectors.com/selector/css4/blank-pseudo-class/" target="_blank" rel="noopener">:blank</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">E:blank {} </span><br><span class="line">E:-moz-only-whitespace { <span class="comment">/* Firefox */</span> }</span><br></pre></td></tr></table></figure><blockquote><p>与css3中的:empty类似,区别是:empty中不能有元素,:blank中可以有;匹配空格,tab和段落换行</p></blockquote><blockquote><p>仅支持火狐,需兼容写法</p></blockquote><ol start="21"><li><a href="http://css4-selectors.com/selector/css4/grid-structural-pseudo-class/" target="_blank" rel="noopener">Grid-Structural</a></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">E:column(selector) {}</span><br><span class="line">E:nth-column(an + b) {}</span><br><span class="line">E:nth-last-column(an + b) {}</span><br></pre></td></tr></table></figure><blockquote><p>匹配对应列的所有元素,:nth-last-column是从后往前数</p></blockquote><blockquote><p>暂不支持所有浏览器</p></blockquote><h4 id="附参考资料："><a href="#附参考资料：" class="headerlink" title="附参考资料："></a>附参考资料：</h4><p><a href="http://css4.rocks/" target="_blank" rel="noopener">文档</a></p><p><a href="http://css4-selectors.com/selectors/" target="_blank" rel="noopener">Demo</a></p>]]></content>
<summary type="html">
<ol>
<li><a href="http://css4-selectors.com/selector/css4/negation-pseudo-class/" target="_blank" rel="noopener">:not</a> </li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:not(s1, s2, ...) &#123;&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在css3中仅能匹配一个选择器,css4中可以匹配多个;</p>
</blockquote>
<blockquote>
<p>:not([data-xxx=”xx”],[data-xxx=”xxx”]);</p>
</blockquote>
<blockquote>
<p>可以用:not()来提高优先级 e.g .negation:not(p){ color:blue; } .negation { color: black; }</p>
</blockquote>
<blockquote>
<p>仅支持safari</p>
</blockquote>
<ol start="2">
<li><a href="http://css4-selectors.com/selector/css4/matches-any-pseudo-class/" target="_blank" rel="noopener">:matches</a> </li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">E:matches(s1, s2) &#123;&#125;</span><br><span class="line">E:-webkit-any(s1, s2, ...) &#123;&#125;</span><br><span class="line">E:-moz-any(s1, s2, ...) &#123;&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>意义与:not()相反,匹配对应选择器,简化重复的规则</p>
</blockquote>
<blockquote>
<p>:matches(span, div) :matches(span, div) {}</p>
</blockquote>
<blockquote>
<p>支持大部分主流浏览器,不支持ie和Edge(win10内置浏览器)</p>
</blockquote>
<ol start="3">
<li><a href="http://css4-selectors.com/selector/css4/relational-pseudo-class/" target="_blank" rel="noopener">:has</a> </li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">E:has(rs1, rs2, ...)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>包含伪类选择器,匹配选择器</p>
</blockquote>
<blockquote>
<p>暂时没有浏览器支持</p>
</blockquote>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="css" scheme="oohyo.github.io/tags/css/"/>
<category term="布局" scheme="oohyo.github.io/tags/%E5%B8%83%E5%B1%80/"/>
<category term="兼容性" scheme="oohyo.github.io/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/"/>
</entry>
<entry>
<title>hexo--d部署失败</title>
<link href="oohyo.github.io/2017/08/11/hexo-d%20%E9%83%A8%E7%BD%B2%E5%A4%B1%E8%B4%A5/"/>
<id>oohyo.github.io/2017/08/11/hexo-d 部署失败/</id>
<published>2017-08-10T16:08:00.000Z</published>
<updated>2018-05-19T01:37:22.727Z</updated>
<content type="html"><![CDATA[<h2 id="fatal-in-unpopulated-submodule-‘-deploy-git’"><a href="#fatal-in-unpopulated-submodule-‘-deploy-git’" class="headerlink" title="fatal: in unpopulated submodule ‘.deploy_git’"></a>fatal: in unpopulated submodule ‘.deploy_git’</h2><blockquote><p>遇到这个错误首先可以先尝试重新安装hexo-deployer-git依赖</p></blockquote><blockquote><p>npm install hexo-deployer-git –save</p></blockquote><blockquote><p>如果还是无法部署，可以尝试将.deploy_git文件夹删除，重新hexo g hexo d</p></blockquote>]]></content>
<summary type="html">
<h2 id="fatal-in-unpopulated-submodule-‘-deploy-git’"><a href="#fatal-in-unpopulated-submodule-‘-deploy-git’" class="headerlink" title="fata
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="hexo" scheme="oohyo.github.io/tags/hexo/"/>
<category term="deployer" scheme="oohyo.github.io/tags/deployer/"/>
<category term="git" scheme="oohyo.github.io/tags/git/"/>
</entry>
<entry>
<title>BFC</title>
<link href="oohyo.github.io/2017/08/01/BFC-%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87/"/>
<id>oohyo.github.io/2017/08/01/BFC-块级格式化上下文/</id>
<published>2017-08-01T13:00:00.000Z</published>
<updated>2018-05-19T01:37:22.726Z</updated>
<content type="html"><![CDATA[<p>       前段时间,在写一个积分规则的静态页面时(如图),想了一下便用了最容易想到的方法实现了…之后code review的时候便被指了出来= = 因为前面有一个点,然后下面一行需要和第一行的文字对齐,便选择用白点占位…</p><p><strong>效果图:</strong> </p><p><img src="http://otzmem48k.bkt.clouddn.com/imgs/pointrules/point.png" alt="pic"> </p><p><strong>代码:</strong> </p><p><img src="http://otzmem48k.bkt.clouddn.com/imgs/pointrules/code.png" alt="pic"></p><p>       显然这么写是不行的,增加了许多没意义的标签,可维护性也不好!整个文本就应该用一个标签包起来,这样也方便维护,所以就了解到了BFC(块级格式化上下文)</p><a id="more"></a><h3 id="1、触发BFC的条件"><a href="#1、触发BFC的条件" class="headerlink" title="1、触发BFC的条件"></a>1、触发BFC的条件</h3><pre><code>float元素；overflow:auto,scroll,hidden,display :inline-block,table,table-caotionposition:absolute,fixed </code></pre><h3 id="2、布局规则"><a href="#2、布局规则" class="headerlink" title="2、布局规则"></a>2、布局规则</h3><ul><li>里面元素不影响外面，完全独立</li><li>从上到下，同一父BFC内margin重叠</li><li>BFC不与浮动元素重叠，浮动参与高度计算、</li><li>内部BFC margin 贴紧 外部border 左或右</li></ul><p><strong>注意:</strong> 在这里是用到了第3条.overflow:hidden触发了BFC,导致自己内部浮动元素高度参与计算,从而避免了高度塌陷.</p><p><strong>改完之后:</strong></p><pre><code><ul> <li> <i class="dot"></i> <div>积分金额指有效真实消费，仅计算使用现金、信用卡、借记卡、步步高商务卡付款等实际付款金额。</div> </li> <li> <i class="dot"></i> <div>健身卡、课程卡、礼品卡、购买商务卡、优惠券（代金券）等礼券类付款部分、促销活动立减部分及积分抵扣部分、特殊品牌（详见门店公告）不参与积分。</div> </li></ul> </code></pre><p>前面的dot需要浮动,文本段加上overflow:hidden即可</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>       平时写代码的时候最好不要图快,抱着实现就可以了的想法,做到扩展性强,可读性好,方便维护.</p>]]></content>
<summary type="html">
<p>&#160; &#160; &#160; &#160;前段时间,在写一个积分规则的静态页面时(如图),想了一下便用了最容易想到的方法实现了…之后code review的时候便被指了出来= = 因为前面有一个点,然后下面一行需要和第一行的文字对齐,便选择用白点占位…</p>
<p><strong>效果图:</strong> </p>
<p><img src="http://otzmem48k.bkt.clouddn.com/imgs/pointrules/point.png" alt="pic"> </p>
<p><strong>代码:</strong> </p>
<p><img src="http://otzmem48k.bkt.clouddn.com/imgs/pointrules/code.png" alt="pic"></p>
<p>&#160; &#160; &#160; &#160;显然这么写是不行的,增加了许多没意义的标签,可维护性也不好!整个文本就应该用一个标签包起来,这样也方便维护,所以就了解到了BFC(块级格式化上下文)</p>
</summary>
<category term="学习笔记" scheme="oohyo.github.io/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="css" scheme="oohyo.github.io/tags/css/"/>
<category term="布局" scheme="oohyo.github.io/tags/%E5%B8%83%E5%B1%80/"/>
</entry>
<entry>
<title>湄江游记</title>
<link href="oohyo.github.io/2017/07/17/%E6%B9%84%E6%B1%9F/"/>
<id>oohyo.github.io/2017/07/17/湄江/</id>
<published>2017-07-16T23:59:00.000Z</published>
<updated>2018-05-19T01:37:22.731Z</updated>
<content type="html"><![CDATA[<h3 id="旅游"><a href="#旅游" class="headerlink" title="旅游"></a>旅游</h3><p><img src="http://om1a60efb.bkt.clouddn.com/image/lvyou/meijiang_01.jpg?imageView2/2/h/300" alt="meijiang"></p><p><strong><center>[图1]湄江水库大坝</center></strong><br><a id="more"></a><br><img src="http://om1a60efb.bkt.clouddn.com/image/lvyou/meijiang_02.jpg?imageView2/2/h/280" style="float:left"><img src="http://om1a60efb.bkt.clouddn.com/image/lvyou/meijiang_03.jpg?imageView2/2/h/280" style="float:left"><img src="http://om1a60efb.bkt.clouddn.com/image/lvyou/meijiang_04.jpg?imageView2/2/h/280" style="float:left"> </p><div style="clear:both"></div> <p><strong>————————[图1]十里画壁———————————–[图2]大坝眺望——————-[图3]大江口——–</strong> </p><p>       这里就放这几张图吧,本来我也挺喜欢旅游的,只是因为太懒了,以为没有什么比呆在家里更nice~但这次小旅行改变我的看法.一起爬观音崖,一起去大坝下面找螃蟹,乘船遨游大江口,参观博物馆,爬香炉山…除了这些之外还有一个有意思的项目就是狼人杀了,一直玩到凌晨都舍不得去睡… </p><h3 id="猫"><a href="#猫" class="headerlink" title="猫"></a>猫</h3><p>       最近一直想样一只小猫,原因有很多,没有立马行动也是因为有一些其他顾虑…但是相信不久之后,或者说等工作稳定了,便会立刻去领养一只并对它负责一生吧//</p><h3 id="书"><a href="#书" class="headerlink" title="书"></a>书</h3><p>       看书的话,最近在看[解忧杂货店],之前就看了一半了,计划这个月看完,然后下个月看亲密关系 </p><h3 id="电视剧"><a href="#电视剧" class="headerlink" title="电视剧"></a>电视剧</h3><p>       国产的楚乔传,冲着颖宝和林狗去看的,没看过小说,剧情有点拖沓,勉强能看;美剧-权利的游戏第7季终于在7-17开更了…据说只有第七季和第八季了,龙妈和异鬼在两边杀,所以发便当的速度会非常快~总而言之,这是一部非常值得一看的剧~ </p><h3 id="结束"><a href="#结束" class="headerlink" title="结束"></a>结束</h3>]]></content>
<summary type="html">
<h3 id="旅游"><a href="#旅游" class="headerlink" title="旅游"></a>旅游</h3><p><img src="http://om1a60efb.bkt.clouddn.com/image/lvyou/meijiang_01.jpg?imageView2/2/h/300" alt="meijiang"></p>
<p><strong><center>[图1]湄江水库大坝</center></strong><br>
</summary>
<category term="旅游" scheme="oohyo.github.io/categories/%E6%97%85%E6%B8%B8/"/>
<category term="随笔" scheme="oohyo.github.io/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>WebPack学习笔记</title>
<link href="oohyo.github.io/2017/06/16/webpack%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<id>oohyo.github.io/2017/06/16/webpack学习笔记/</id>
<published>2017-06-15T16:50:00.000Z</published>
<updated>2018-05-19T01:37:22.729Z</updated>
<content type="html"><![CDATA[<h2 id="什么是WebPack"><a href="#什么是WebPack" class="headerlink" title="什么是WebPack?"></a>什么是WebPack?</h2><p>webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。</p><h2 id="为什么是WebPack"><a href="#为什么是WebPack" class="headerlink" title="为什么是WebPack"></a>为什么是WebPack</h2><h3 id="1-模块化"><a href="#1-模块化" class="headerlink" title="1.模块化"></a>1.模块化</h3><ul><li>将复杂的程序细分成小模块,通过可以将其他资源转换成 JavaScript 的加载器，实现一切皆模块</li><li>对 CommonJS 、 AMD 、ES6的语法做了兼容，以及特殊模块的 Shim 处理(shim:为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。) </li><li>CommonJS模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中</li><li>异步加载,模块通过 define 函数定义在闭包中,return返回</li></ul><a id="more"></a><h3 id="2-开发便捷"><a href="#2-开发便捷" class="headerlink" title="2.开发便捷"></a>2.开发便捷</h3><ul><li>能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等</li><li>对 JS、CSS、图片等资源文件都支持打包，配合 loader 加载器，也可以支持 Sass，Less 等 CSS 预处理器</li><li>串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，通过 babel-loader 就可以直接使用 ES6 的模块机制</li><li>具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活。 </li></ul><h3 id="3-性能更优"><a href="#3-性能更优" class="headerlink" title="3.性能更优"></a>3.性能更优</h3><ul><li>基于配置智能分析打包多个文件，实现公共模块按需加载</li><li>在内存中打包，性能更快</li><li>使用异步io,并具有多级缓存</li></ul><h3 id="4-区别于gulp-amp-amp-grunt"><a href="#4-区别于gulp-amp-amp-grunt" class="headerlink" title="4.区别于gulp&&grunt"></a>4.区别于gulp&&grunt</h3><ul><li>Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。</li><li>Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件</li></ul><h2 id="文件目录"><a href="#文件目录" class="headerlink" title="文件目录"></a>文件目录</h2><pre><code>|—— app| |—— Greeter.js| |__ main.js| |__ module.js| |__ color.scss| |__ module.js||—— public| |—— bundle.js| |__ index.html||—— node_modules //依赖|__ package.json //环境配置|__ webpack.config.js //参数配置</code></pre><h2 id="WebPack安装与配置"><a href="#WebPack安装与配置" class="headerlink" title="WebPack安装与配置"></a>WebPack安装与配置</h2><pre><code>npm install -g webpack //全局安装npm install --save-dev webpack //当前项目中安装npm install //安装依赖npm install -g webpack-dev-server //安装webpack开发服务器</code></pre><h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><p>1.css - ExtractTextPlugin</p><h3 id="WebPack常用命令"><a href="#WebPack常用命令" class="headerlink" title="WebPack常用命令"></a>WebPack常用命令</h3><ul><li>webpack 最基本的启动webpack命令</li><li>webpack -w 提供watch方法，实时进行打包更新</li><li>webpack -p 对打包后的文件进行压缩</li><li>webpack -d 提供SourceMaps，方便调试</li><li>webpack-dev-server –open 静态资源服务器</li></ul><h2 id="静态资源服务器"><a href="#静态资源服务器" class="headerlink" title="静态资源服务器"></a>静态资源服务器</h2><pre><code>npm install -g webpack-dev-server //安装webpack开发服务器 </code></pre><h2 id="从WebPack-1-X-迁移到-WebPack-2-X"><a href="#从WebPack-1-X-迁移到-WebPack-2-X" class="headerlink" title="从WebPack 1.X 迁移到 WebPack 2.X"></a>从WebPack 1.X 迁移到 WebPack 2.X</h2><h3 id="1-Resolve"><a href="#1-Resolve" class="headerlink" title="1.Resolve"></a>1.Resolve</h3><p>resolve.extensions 不再需要传入空字符串，extensions: [‘’, ‘js’] -> extensions: [‘js’]。</p><h3 id="2-Module-取消了在模块名中自动添加-loader-后缀"><a href="#2-Module-取消了在模块名中自动添加-loader-后缀" class="headerlink" title="2.Module 取消了在模块名中自动添加 -loader 后缀"></a>2.Module 取消了在模块名中自动添加 -loader 后缀</h3><p>module.loaders 修改为 module.rules 。<br>// 为了兼容旧版，module.loaders 语法仍然有效，旧的属性名依然可以被解析<br>Loaders 需要添加 -loader，如 babel -> babel-loader 。</p><pre><code>module: { rules: [ { use: [ //"style", "style-loader", //"css", "css-loader", //"less", "less-loader", ] } ] }</code></pre><h3 id="3-链式-loaders"><a href="#3-链式-loaders" class="headerlink" title="3.链式 loaders"></a>3.链式 loaders</h3><p>与 v1 版本相同，loaders 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。使用 rule.use 配置项，use 可以设置为一个 loaders 的列表。在 v1 版本中，loaders 通常被用 ! 连写。这一写法在新版中只在使用旧的 module.loaders 时有效。</p><h3 id="4-Extract-Text-Webpack-Plugin"><a href="#4-Extract-Text-Webpack-Plugin" class="headerlink" title="4.Extract-Text-Webpack-Plugin"></a>4.Extract-Text-Webpack-Plugin</h3><pre><code>module: { rules: [ test: /.css$/, //loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" }) loader: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader", publicPath: "/dist" }) ]} </code></pre><h3 id="567…"><a href="#567…" class="headerlink" title="567…"></a>567…</h3><h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul><li>官方文档(<a href="https://webpack.js.org/guides/get-started/" target="_blank" rel="noopener">https://webpack.js.org/guides/get-started/</a>)</li><li>中文文档(<a href="https://doc.webpack-china.org/guides/get-started/" target="_blank" rel="noopener">https://doc.webpack-china.org/guides/get-started/</a>)</li></ul>]]></content>
<summary type="html">
<h2 id="什么是WebPack"><a href="#什么是WebPack" class="headerlink" title="什么是WebPack?"></a>什么是WebPack?</h2><p>webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。</p>
<h2 id="为什么是WebPack"><a href="#为什么是WebPack" class="headerlink" title="为什么是WebPack"></a>为什么是WebPack</h2><h3 id="1-模块化"><a href="#1-模块化" class="headerlink" title="1.模块化"></a>1.模块化</h3><ul>
<li>将复杂的程序细分成小模块,通过可以将其他资源转换成 JavaScript 的加载器，实现一切皆模块</li>
<li>对 CommonJS 、 AMD 、ES6的语法做了兼容，以及特殊模块的 Shim 处理(shim:为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。) </li>
<li>CommonJS模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中</li>
<li>异步加载,模块通过 define 函数定义在闭包中,return返回</li>
</ul>
</summary>
<category term="WebPack" scheme="oohyo.github.io/categories/WebPack/"/>
<category term="js" scheme="oohyo.github.io/tags/js/"/>
<category term="WebPack" scheme="oohyo.github.io/tags/WebPack/"/>
</entry>
</feed>