Repository navigation
Expand file tree
/
Copy pathatom.xml
More file actions
348 lines (193 loc) · 64.1 KB
/
Copy pathatom.xml
File metadata and controls
348 lines (193 loc) · 64.1 KB
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>wintercomming的博客</title>
<subtitle>欢迎来到wintercomming技术博客之家</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2019-01-18T12:59:27.483Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>mingjie yao</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>数组迭代方法总结</title>
<link href="http://yoursite.com/2019/01/18/%E6%95%B0%E7%BB%84%E8%BF%AD%E4%BB%A3%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/"/>
<id>http://yoursite.com/2019/01/18/数组迭代方法总结/</id>
<published>2019-01-18T12:49:30.000Z</published>
<updated>2019-01-18T12:59:27.483Z</updated>
<content type="html"><![CDATA[<p>话不多说，一图搞定！！</p><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="\img\数组迭代方法.jpg" alt="数组迭代方法" title=""> </div> <div class="image-caption">数组迭代方法</div> </figure><p>上面是数组的一些高阶函数，有很多妙用，让我记忆深刻的是之前灯南学长的reduce和indexOf & lastindexOf实现数组去重，在以后的工作和学习中若遇到其他巧妙地运用方法会将其整理于此</p>]]></content>
<summary type="html">
<p>话不多说，一图搞定！！</p>
<figure class="image-bubble">
<div class="img-lightbox">
<div class="overlay"></div>
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>前端跨域</title>
<link href="http://yoursite.com/2019/01/17/%E5%89%8D%E7%AB%AF%E8%B7%A8%E5%9F%9F/"/>
<id>http://yoursite.com/2019/01/17/前端跨域/</id>
<published>2019-01-17T07:58:48.000Z</published>
<updated>2019-02-26T15:05:41.775Z</updated>
<content type="html"><![CDATA[<h2 id="跨域是什么？有什么用？"><a href="#跨域是什么？有什么用？" class="headerlink" title="跨域是什么？有什么用？"></a>跨域是什么？有什么用？</h2><p>想要了解这个，还得从网络资源讲起。</p><p>电脑的设计包含了很多人类的主观思想，电脑和电脑之间的交流也一样，不过他们使用的是计算机语言，当我们请求服务器，就建立了一个电脑与电脑之间的交流</p><p>当我们建立连接并接受数据以后</p>]]></content>
<summary type="html">
<h2 id="跨域是什么？有什么用？"><a href="#跨域是什么？有什么用？" class="headerlink" title="跨域是什么？有什么用？"></a>跨域是什么？有什么用？</h2><p>想要了解这个，还得从网络资源讲起。</p>
<p>电脑的设计包含了很
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>JavaScript面向对象之继承封装和多态</title>
<link href="http://yoursite.com/2019/01/17/JavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E4%B9%8B%E7%BB%A7%E6%89%BF%E5%B0%81%E8%A3%85%E5%92%8C%E5%A4%9A%E6%80%81/"/>
<id>http://yoursite.com/2019/01/17/JavaScript面向对象之继承封装和多态/</id>
<published>2019-01-17T07:20:17.000Z</published>
<updated>2019-01-21T03:54:27.594Z</updated>
<content type="html"><![CDATA[<h2 id="继承-封装-多态"><a href="#继承-封装-多态" class="headerlink" title="继承 封装 多态"></a>继承 封装 多态</h2><p>封装继承和多态是面向对象编程的三大特性，在js里面也是不可缺少的一环，下面将介绍js封装继承和多态的一些方法</p><h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3>]]></content>
<summary type="html">
<h2 id="继承-封装-多态"><a href="#继承-封装-多态" class="headerlink" title="继承 封装 多态"></a>继承 封装 多态</h2><p>封装继承和多态是面向对象编程的三大特性，在js里面也是不可缺少的一环，下面将介绍js封装继承
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>DOM树和浏览器渲染机制</title>
<link href="http://yoursite.com/2019/01/17/DOM%E6%A0%91%E5%92%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E6%9C%BA%E5%88%B6/"/>
<id>http://yoursite.com/2019/01/17/DOM树和浏览器渲染机制/</id>
<published>2019-01-17T07:19:11.000Z</published>
<updated>2019-02-26T08:37:58.116Z</updated>
<content type="html"><![CDATA[<h2 id="了解浏览器有什么作用？"><a href="#了解浏览器有什么作用？" class="headerlink" title="了解浏览器有什么作用？"></a>了解浏览器有什么作用？</h2><p>在网页开发的长期过程中，浏览器对于大部分WEB开发者就好似黑盒子一般的存在，很少有人注意到这方面的问题，直到近些年代码的开放、性能优化的需求、网页知识链的扩增才渐渐让开发者注意到了浏览器内部的问题，不过对于大部分初学者可能还是对此知之甚少。</p><p>实际上经过一些顶尖开发者的努力，发现了浏览器不少的问题和运行机制，不过今天我们讲讲最基本的浏览器知识，那就是渲染机制</p><h2 id="浏览器内核"><a href="#浏览器内核" class="headerlink" title="浏览器内核"></a>浏览器内核</h2><p>这个问题其实在很久之前就开始讨论，由于浏览器的内核不同也让众多开发者脑子隐隐作痛，IE6 7 8的适配成为前端工作者的一个噩梦，许多人闻之色变.</p><p>最近微软也是宣布将放弃IE，开发者拍手叫好，同时也代表前端技术统一的时代会加速来临，一直以来不成体系的知识是初级开发者难以提升的难点之一</p><p>话说回来，浏览器的内核主要分为几种 chrome的WebKit内核(著名的V8是其中一部分) firefox的Gecko内核 微软的Trident内核 Chromium(用 electron开发)的BLINK内核</p><p>这对了解渲染机制很重要，因为首先你要清楚他是用什么实现的</p><h2 id="内核如何渲染"><a href="#内核如何渲染" class="headerlink" title="内核如何渲染"></a>内核如何渲染</h2><p>实际上，内核是一个大的说法，我们知道，浏览器的一个tab页面就是一个进程(当然也不一定，存在一定特殊情况，如多个空白页面)，当一个tab页面被打开时就代表一个浏览器引擎开始运作，我们在服务器获取资源后，浏览器就会开始渲染资源。</p><p>其中内核包含两部分(目前的说法)，js引擎和渲染引擎，js引擎顾名思义就是用于处理js代码的引擎，而渲染引擎则是用于绘制页面的引擎，两者都是单独的线程，而这样代表了两者只能同时运行一个，所以在head标签内添加script标签会阻塞代码运行，在最老的浏览器里面，甚至有一些只拥有渲染引擎的浏览器。</p><p>在渲染资源的开端，浏览器会将HTML和CSS分开处理，首先会将HTML处理为DOM树(可以理解为一个对象)，树是数据结构的一种，这样也方便后续的操作。在形成DOM树后，CSS代码也会被逐步解析，形成CSSOM树，对应DOM上面的一个个节点，两者都处理完成后，引擎将其合并，形成render tree，所有的步骤都有大量的优化，而chrome浏览器比Firefox快就是因为这些点(我猜的)，形成render tree后引擎开始绘制，这个步骤会被某些特殊的事件延迟，常规做法是禁止延迟的，绘制会在内存里面形成位图，即我们所能看见的部分的像素点位置和颜色，随后再显示在屏幕上。到此用户便可以看见页面元素了，通常用户体验感受最深刻的也是这一部分。</p><p>因为优化用户体验的原因，一般主流网站会在位图描绘完毕后加载JavaScript代码，而JS代码里面也存在很多获取DOM元素的方法和事件，所以放在此处也是最合适的选择。</p><h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>虽然过程并不多，但实际上浏览器内部对此进行了大量的优化，也限于我水平的因素，不能了解到更多底层的知识，不过这一块的知识是相当深厚的，值得大量的WEB应用开发者去推敲和研究。</p>]]></content>
<summary type="html">
<h2 id="了解浏览器有什么作用？"><a href="#了解浏览器有什么作用？" class="headerlink" title="了解浏览器有什么作用？"></a>了解浏览器有什么作用？</h2><p>在网页开发的长期过程中，浏览器对于大部分WEB开发者就好似黑盒子一般
</summary>
<category term="浏览器" scheme="http://yoursite.com/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/"/>
</entry>
<entry>
<title>实习所遇问题总结</title>
<link href="http://yoursite.com/2019/01/17/%E5%AE%9E%E4%B9%A0%E6%89%80%E9%81%87%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/"/>
<id>http://yoursite.com/2019/01/17/实习所遇问题总结/</id>
<published>2019-01-17T07:18:02.000Z</published>
<updated>2019-02-26T11:43:46.131Z</updated>
<content type="html"><![CDATA[<h2 id="1-代码命名规范和注释"><a href="#1-代码命名规范和注释" class="headerlink" title="1.代码命名规范和注释"></a>1.代码命名规范和注释</h2><p>虽然这个问题经常在提，但是它还是发生了，说一说我的感受：</p><p>命名一定要足够清晰，比如该组件是登录页面下的username输入窗口，可以命名为login_UsernameInput，因为公司项目是多人合作，阅读代码需要消耗不少的时间成本，所以要尽可能的命名为能够一眼就看得懂得单词或者语句。</p><p>公司必须要有自己的一套代码规范的方案，无论是驼峰命名还是用‘_’隔开，而且需要建立起完整的code review制度，特别是对于TOC项目，有很多组件在各个项目之间甚至跨平台或者产品迭代都会复用，如果在开发中代码规范不够严谨，会造成一定的误解，开发效率也会降低，甚至会遇到找不到变量，变量名重复等等问题。</p><p>强迫症患者可以忽视以上信息</p><h2 id="2-函数和组件可复用的重要性"><a href="#2-函数和组件可复用的重要性" class="headerlink" title="2.函数和组件可复用的重要性"></a>2.函数和组件可复用的重要性</h2><p>我在刚开始编写业务复杂的页面时，会选择直接上手，一开始的理解是这样：</p><p>现在有一个业务 六个输入框都调用同样函数，自然会将函数写为一个。</p><p>但是实际开发中往往会遇到以下问题：</p><p>六个输入框中，均需要验证输入字符是否符合规范，他们都需要验证是否含有空格，其中1、4要验证是否含有数字，2、5要验证是否含有小写字母，3、6要验证是否含有大写字母，而1不仅需要验证数字，还要验证小写字母，等等等等等等</p><p>此类问题数不胜数，不仅是函数之间的问题，很可能就是子组件的问题，甚至页面区块的问题，在遇到此类问题时，一定要舍得下时间先分析代码的拆分，哪些是可以组合复用的，哪些是独立执行的，这样写出来的代码不仅条理清晰而且体积小，复用性高，会节省很多的无谓搬砖劳动，实际上归其本质jQuery、Lodash、underscore等等js库最初也是编写者为了代码的简洁复用创造而出，看似并不起眼的问题实际上能造成很大的影响</p><h2 id="3-当UI库或其他功能组件无法达到预期目的应该怎么办？"><a href="#3-当UI库或其他功能组件无法达到预期目的应该怎么办？" class="headerlink" title="3.当UI库或其他功能组件无法达到预期目的应该怎么办？"></a>3.当UI库或其他功能组件无法达到预期目的应该怎么办？</h2><p>工作过程中，遇到了以下问题：</p><p>iview的表格组件不能合并单元格。</p><p>刚开始我一直在阅读文档细节，企图找出关于合并单元格的介绍，最后发现iview表格组件确实不存在合并单元格的情况。</p><p>这个时候当然要：自己写一个外观相似的组件了(外观相似度90%以上)。<br>因为如果相似度不够高，用户就会别扭。</p><p>在此之前我一直以为这些库肯定面面俱到，直到发现了错误，同时也鼓励了我，虽然最后我因为排期原因并没有将其封装成组件，而是用了原生表格加上相应的样式表代替，但是对我个人启发很大，当所有事情都开始依赖别人的东西的时候，创造力就已经被剥夺得寥寥无几了。</p><h2 id="4-阅读文档要认真"><a href="#4-阅读文档要认真" class="headerlink" title="4.阅读文档要认真"></a>4.阅读文档要认真</h2><p>对于大部分技术来说，官方文档是相对更权威的材料，而记载的问题如果没有仔细观看和记住，会在出错时埋下一个坑</p><p>思考来源：在项目中使用v-for遍历对象并显示时，发现若对象有属性值为数组时，改变数组内元素页面不会对应刷新，实际上官方文档有说过这个问题，因为v-for的双向绑定并不是深度遍历的，只会监控对象属性值的变化，而不会监控对象属性值的属性变化。</p>]]></content>
<summary type="html">
<h2 id="1-代码命名规范和注释"><a href="#1-代码命名规范和注释" class="headerlink" title="1.代码命名规范和注释"></a>1.代码命名规范和注释</h2><p>虽然这个问题经常在提，但是它还是发生了，说一说我的感受：</p>
<
</summary>
<category term="日常问题" scheme="http://yoursite.com/tags/%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98/"/>
</entry>
<entry>
<title>偏函数与柯里化</title>
<link href="http://yoursite.com/2019/01/17/%E5%81%8F%E5%87%BD%E6%95%B0%E4%B8%8E%E6%9F%AF%E9%87%8C%E5%8C%96/"/>
<id>http://yoursite.com/2019/01/17/偏函数与柯里化/</id>
<published>2019-01-17T07:17:22.000Z</published>
<updated>2019-01-17T07:17:22.957Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>promise</title>
<link href="http://yoursite.com/2019/01/17/promise/"/>
<id>http://yoursite.com/2019/01/17/promise/</id>
<published>2019-01-17T07:16:52.000Z</published>
<updated>2019-01-17T07:16:52.074Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>javascript闭包</title>
<link href="http://yoursite.com/2019/01/17/javascript%E9%97%AD%E5%8C%85/"/>
<id>http://yoursite.com/2019/01/17/javascript闭包/</id>
<published>2019-01-17T07:15:48.000Z</published>
<updated>2019-01-17T07:15:48.538Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>BFC详解</title>
<link href="http://yoursite.com/2019/01/17/BFC%E8%AF%A6%E8%A7%A3/"/>
<id>http://yoursite.com/2019/01/17/BFC详解/</id>
<published>2019-01-17T07:13:57.000Z</published>
<updated>2019-02-26T07:35:52.488Z</updated>
<content type="html"><![CDATA[<h2 id="什么是BFC"><a href="#什么是BFC" class="headerlink" title="什么是BFC"></a>什么是BFC</h2><p>从英文释义上来讲 BFC = block-level box(块级盒子) + Formatting Context</p><p>block-level box便不用介绍了，众所周知盒子分为block box(块级元素) ，inline box(行内元素)和 inline-block box(同时拥有block可以定义宽高的特性和inline不换行的特性)三种，各有其不同特性。</p><p>Formatting Context则是CSS2.1的一种规范，这种规范决定了子元素布局和元素与其他元素的关系，BFC只是其中的一种，除了BFC还有IFC，FFC(flex布局)和GFC(grid布局)<br>所以很多人将BFC翻译为：块级格式化上下文</p><h2 id="如何形成一个BFC"><a href="#如何形成一个BFC" class="headerlink" title="如何形成一个BFC"></a>如何形成一个BFC</h2><p>满足下列条件中至少一项，即可触发 BFC：</p><p>1.float 的值不为none。</p><p>2.position 的值不为static或者relative。</p><p>3.display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个。</p><p>4.overflow的值不为visible。</p><h2 id="BFC能干什么？"><a href="#BFC能干什么？" class="headerlink" title="BFC能干什么？"></a>BFC能干什么？</h2><p>1.边距重叠(也称margin 重叠)</p><p>正常的盒子规则中，上下盒子都有margin的话，距离并非两者margin相加，而是算为两个盒子最大margin值，这个时候就会出现margin重叠问题。<br>边距重叠会带来布局上的困扰，如果你是用margin来让元素之间保持距离的话，BFC就能帮上大忙了</p><p>两个块元素要产生折叠现象，必须满足一个必备条件：这两个元素的 margin 必须是 相邻 的；那么如果定义相邻呢，w3c 规范，两个 margin 是邻接的必须满足以下条件：</p><p>必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个 BFC 当中。</p><p>没有inline盒子，没有空隙，没有 padding 和 border 将他们分隔开。</p><p>都属于垂直方向上相邻的外边距。</p><p>2.清除内部浮动</p><p>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</p><p>这是BFC其中的一个规范，我们知道，float浮动会使元素脱离常规文档流，往往使布局变得不可控，但是我们可以将其父级盒子变成BFC，这样子元素则会相对于父元素内部浮动，而不会影响外面的元素了</p>]]></content>
<summary type="html">
<h2 id="什么是BFC"><a href="#什么是BFC" class="headerlink" title="什么是BFC"></a>什么是BFC</h2><p>从英文释义上来讲 BFC = block-level box(块级盒子) + Formatting Cont
</summary>
<category term="CSS" scheme="http://yoursite.com/tags/CSS/"/>
</entry>
<entry>
<title>防抖和节流</title>
<link href="http://yoursite.com/2019/01/17/%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/"/>
<id>http://yoursite.com/2019/01/17/防抖和节流/</id>
<published>2019-01-17T07:13:38.000Z</published>
<updated>2019-01-20T15:45:35.392Z</updated>
<content type="html"><![CDATA[<h2 id="什么是防抖？什么是节流？"><a href="#什么是防抖？什么是节流？" class="headerlink" title="什么是防抖？什么是节流？"></a>什么是防抖？什么是节流？</h2><p>在了解如何实现防抖和节流之前，我们先来了解防抖和节流到底是用来做什么的</p><p>在前端开发中会遇到一些频繁的事件触发，比如：</p><p>window 的 resize、scroll<br>mousedown、mousemove<br>keyup、keydown</p><p>而这些事件的频繁触发会导致很多问题，性能不好以及多次请求等等问题</p><p>例如:多次点击搜索引擎搜索按钮</p><p>于是根据业务需求出现了防抖和节流两种解决方法</p><p>防抖的中心思想是：如果用户在规定时间内触发多次事件且之间间隔不超过规定时间，都统一在用户最后一次触发事件规定时间后执行该事件</p><p>节流则不同</p><p>节流的中心思想是:无论用户在规定的时间范围内触发了多少次事件，该时间范围内只执行一次事件</p><h2 id="如何实现防抖？"><a href="#如何实现防抖？" class="headerlink" title="如何实现防抖？"></a>如何实现防抖？</h2><p>首先是不带立即执行参数的防抖</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> doubance(func ,time){</span><br><span class="line"><span class="built_in">let</span> timeout;</span><br><span class="line"><span class="built_in">return</span> <span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> clearTimeout(timeout)</span><br><span class="line"> time = setTimeout(func,timeout)</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>但是往往都需要有一个立即执行的选项</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></pre></td><td class="code"><pre><span class="line">// 这个是用来获取当前时间戳的</span><br><span class="line"><span class="keyword">function</span> <span class="function"><span class="title">now</span></span>() {</span><br><span class="line"> <span class="built_in">return</span> +new Date()</span><br><span class="line">}</span><br><span class="line">/**</span><br><span class="line"> * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 <span class="built_in">wait</span>，func 才会执行</span><br><span class="line"> *</span><br><span class="line"> * @param {<span class="keyword">function</span>} func 回调函数</span><br><span class="line"> * @param {number} <span class="built_in">wait</span> 表示时间窗口的间隔</span><br><span class="line"> * @param {boolean} immediate 设置为ture时，是否立即调用函数</span><br><span class="line"> * @<span class="built_in">return</span> {<span class="keyword">function</span>} 返回客户调用函数</span><br><span class="line"> */</span><br><span class="line"><span class="keyword">function</span> debounce (func, <span class="built_in">wait</span> = 50, immediate = <span class="literal">true</span>) {</span><br><span class="line"> <span class="built_in">let</span> timer, context, args</span><br><span class="line"></span><br><span class="line"> // 延迟执行函数</span><br><span class="line"> const later = () => setTimeout(() => {</span><br><span class="line"> // 延迟函数执行完毕，清空缓存的定时器序号</span><br><span class="line"> timer = null</span><br><span class="line"> // 延迟执行的情况下，函数会在延迟函数中执行</span><br><span class="line"> // 使用到之前缓存的参数和上下文</span><br><span class="line"> <span class="keyword">if</span> (!immediate) {</span><br><span class="line"> func.apply(context, args)</span><br><span class="line"> context = args = null</span><br><span class="line"> }</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 class="built_in">return</span> <span class="keyword">function</span>(...params) {</span><br><span class="line"> // 如果没有创建延迟执行函数（later），就创建一个</span><br><span class="line"> <span class="keyword">if</span> (!timer) {</span><br><span class="line"> timer = later()</span><br><span class="line"> // 如果是立即执行，调用函数</span><br><span class="line"> // 否则缓存参数和调用上下文</span><br><span class="line"> <span class="keyword">if</span> (immediate) {</span><br><span class="line"> func.apply(this, params)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> context = this</span><br><span class="line"> args = params</span><br><span class="line"> }</span><br><span class="line"> // 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个</span><br><span class="line"> // 这样做延迟函数会重新计时</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> clearTimeout(timer)</span><br><span class="line"> timer = later()</span><br><span class="line"> }</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><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><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></pre></td><td class="code"><pre><span class="line">_.throttle = <span class="keyword">function</span>(func, <span class="built_in">wait</span>, options) {</span><br><span class="line"> var context, args, result;</span><br><span class="line"> var timeout = null;</span><br><span class="line"> // 之前的时间戳</span><br><span class="line"> var previous = 0;</span><br><span class="line"> // 如果 options 没传则设为空对象</span><br><span class="line"> <span class="keyword">if</span> (!options) options = {};</span><br><span class="line"> // 定时器回调函数</span><br><span class="line"> var later = <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> // 如果设置了 leading，就将 previous 设为 0</span><br><span class="line"> // 用于下面函数的第一个 <span class="keyword">if</span> 判断</span><br><span class="line"> previous = options.leading === <span class="literal">false</span> ? 0 : _.now();</span><br><span class="line"> // 置空一是为了防止内存泄漏，二是为了下面的定时器判断</span><br><span class="line"> timeout = null;</span><br><span class="line"> result = func.apply(context, args);</span><br><span class="line"> <span class="keyword">if</span> (!timeout) context = args = null;</span><br><span class="line"> };</span><br><span class="line"> <span class="built_in">return</span> <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> // 获得当前时间戳</span><br><span class="line"> var now = _.now();</span><br><span class="line"> // 首次进入前者肯定为 <span class="literal">true</span></span><br><span class="line"> // 如果需要第一次不执行函数</span><br><span class="line"> // 就将上次时间戳设为当前的</span><br><span class="line"> // 这样在接下来计算 remaining 的值时会大于0</span><br><span class="line"> <span class="keyword">if</span> (!previous && options.leading === <span class="literal">false</span>) previous = now;</span><br><span class="line"> // 计算剩余时间</span><br><span class="line"> var remaining = <span class="built_in">wait</span> - (now - previous);</span><br><span class="line"> context = this;</span><br><span class="line"> args = arguments;</span><br><span class="line"> // 如果当前调用已经大于上次调用时间 + <span class="built_in">wait</span></span><br><span class="line"> // 或者用户手动调了时间</span><br><span class="line"> // 如果设置了 trailing，只会进入这个条件</span><br><span class="line"> // 如果没有设置 leading，那么第一次会进入这个条件</span><br><span class="line"> // 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 <span class="keyword">if</span> 条件了</span><br><span class="line"> // 其实还是会进入的，因为定时器的延时</span><br><span class="line"> // 并不是准确的时间，很可能你设置了2秒</span><br><span class="line"> // 但是他需要2.2秒才触发，这时候就会进入这个条件</span><br><span class="line"> <span class="keyword">if</span> (remaining <= 0 || remaining > <span class="built_in">wait</span>) {</span><br><span class="line"> // 如果存在定时器就清理掉否则会调用二次回调</span><br><span class="line"> <span class="keyword">if</span> (timeout) {</span><br><span class="line"> clearTimeout(timeout);</span><br><span class="line"> timeout = null;</span><br><span class="line"> }</span><br><span class="line"> previous = now;</span><br><span class="line"> result = func.apply(context, args);</span><br><span class="line"> <span class="keyword">if</span> (!timeout) context = args = null;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (!timeout && options.trailing !== <span class="literal">false</span>) {</span><br><span class="line"> // 判断是否设置了定时器和 trailing</span><br><span class="line"> // 没有的话就开启一个定时器</span><br><span class="line"> // 并且不能不能同时设置 leading 和 trailing</span><br><span class="line"> timeout = setTimeout(later, remaining);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> result;</span><br><span class="line"> };</span><br><span class="line"> };</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="什么是防抖？什么是节流？"><a href="#什么是防抖？什么是节流？" class="headerlink" title="什么是防抖？什么是节流？"></a>什么是防抖？什么是节流？</h2><p>在了解如何实现防抖和节流之前，我们先来了解防抖和节流到底是用
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>浅拷贝和深拷贝</title>
<link href="http://yoursite.com/2019/01/17/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/"/>
<id>http://yoursite.com/2019/01/17/浅拷贝和深拷贝/</id>
<published>2019-01-17T03:06:39.000Z</published>
<updated>2019-01-17T03:56:02.301Z</updated>
<content type="html"><![CDATA[<h2 id="什么是浅拷贝？什么是深拷贝？"><a href="#什么是浅拷贝？什么是深拷贝？" class="headerlink" title="什么是浅拷贝？什么是深拷贝？"></a>什么是浅拷贝？什么是深拷贝？</h2><p>首先介绍一下浅拷贝:<br>在javascript的实际运用中经常会出现以下问题:<br>有一个对象，我们将其值赋给了另一个对象，如下:<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><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> Obj2 = Obj;</span><br></pre></td></tr></table></figure></p><p>看起来没什么问题，但是当我们对Obj进行改动的时候Obj2也会对应的进行改变，在一些业务逻辑中我们常常会需要解决这样的问题，于是出现了浅拷贝</p><p>但是浅拷贝也不是万能的<br>例如遇到如下情况:</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></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line"> todo:{</span><br><span class="line"> wash:<span class="string">'room'</span>,</span><br><span class="line"> eat:<span class="string">'dinner'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> Obj2 = Obj;</span><br></pre></td></tr></table></figure><p>这个时候浅拷贝就不是可靠的了，当我们改动浅拷贝后的Obj2中的todo属性，会发现Obj会相应的改变，这个时候就需要深拷贝了<br>即当对象内还有属性是对象时，对其进行深拷贝才能解决刚才的问题</p><h2 id="如何浅拷贝"><a href="#如何浅拷贝" class="headerlink" title="如何浅拷贝"></a>如何浅拷贝</h2><p>1.使用Object.assign来解决这个问题。<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><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> Obj1 = Object.assign({},Obj);</span><br><span class="line"><span class="built_in">let</span> Obj2 = Obj1;</span><br></pre></td></tr></table></figure></p><p>2.使用es6的展开运算符(…)来解决问题.<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><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> Obj2 = ...Obj1;</span><br></pre></td></tr></table></figure></p><h2 id="如何深拷贝"><a href="#如何深拷贝" class="headerlink" title="如何深拷贝"></a>如何深拷贝</h2><p>通常可以用JSON.parse(JSON.stringify(object))来解决这个问题</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></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line"> todo:{</span><br><span class="line"> wash:<span class="string">'room'</span>,</span><br><span class="line"> eat:<span class="string">'dinner'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> Obj2 = JSON.parse(JSON.stringify(Obj));</span><br></pre></td></tr></table></figure><p>该方法虽然简便，但是有弊端<br>1.会忽略 undefined<br>2.会忽略 symbol<br>3.不能序列化函数<br>4.不能解决循环引用的对象</p><p>遇到以上情况时，就可以使用其他的方法，因为上面方法是最简便的，所以一般优先考虑上一个方法</p><p>其他的深拷贝方法原理一般是半递归(我本人自己的说辞)</p><p>例如 使用for-in解决此问题<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><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> Obj = {</span><br><span class="line"> name:<span class="string">'james'</span>,</span><br><span class="line"> age:18,</span><br><span class="line"> todo:{</span><br><span class="line"> wash:<span class="string">'room'</span>,</span><br><span class="line"> eat:<span class="string">'dinner'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> deepclone(Obj){</span><br><span class="line"> <span class="keyword">function</span> isObject(Obj){</span><br><span class="line"><span class="keyword">if</span>(typeof(Obj)==<span class="string">'Object'</span>){</span><br><span class="line"> <span class="built_in">return</span> <span class="literal">true</span>;</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"> <span class="built_in">return</span> <span class="literal">false</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>(!isObject(Obj)){</span><br><span class="line"><span class="built_in">return</span> <span class="string">'你输入的不是一个对象'</span></span><br><span class="line"> }</span><br><span class="line"><span class="built_in">let</span> newObj = {};</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(key <span class="keyword">in</span> Obj){</span><br><span class="line"></span><br><span class="line">newObj[key]=isObject(Obj[key])?deepclone(Obj[key]):Obj[key];</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="built_in">return</span> newObj</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>可以看出，函数内会遍历对象属性并且判断处理后给新对象赋值，如果判断出某个属性的值是对象则遍历该函数一次，所以我称其为半遍历。</p>]]></content>
<summary type="html">
<h2 id="什么是浅拷贝？什么是深拷贝？"><a href="#什么是浅拷贝？什么是深拷贝？" class="headerlink" title="什么是浅拷贝？什么是深拷贝？"></a>什么是浅拷贝？什么是深拷贝？</h2><p>首先介绍一下浅拷贝:<br>在javascr
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>javascript原型和原型链</title>
<link href="http://yoursite.com/2019/01/17/javascript%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE/"/>
<id>http://yoursite.com/2019/01/17/javascript原型和原型链/</id>
<published>2019-01-17T01:43:21.000Z</published>
<updated>2019-01-17T02:55:22.336Z</updated>
<content type="html"><![CDATA[<p>首先先看一张图:<br><figure class="image-bubble"> <div class="img-lightbox"> <div class="overlay"></div> <img src="\img\原型链.png" alt="原型链" title=""> </div> <div class="image-caption">原型链</div> </figure></p><h2 id="原型链是什么？原型是什么？"><a href="#原型链是什么？原型是什么？" class="headerlink" title="原型链是什么？原型是什么？"></a>原型链是什么？原型是什么？</h2><p>在我的理解中，原型链是javascript的一种语言机制所产生的内部结构，这种内部结构不仅实现了内部的一些方法和属性的继承，而且明确了构造函数和实例的关系，同时它也带来了一些不必要的麻烦，原型则是用于实现原型链的中间产物，而作为一个经常与javascript打交道的前端工程师来说，理解其特性的运用和原理是必不可少的。</p><h2 id="原型链的规则"><a href="#原型链的规则" class="headerlink" title="原型链的规则"></a>原型链的规则</h2><p>作为一种语言的内部机制，自然有自己的一套内部准则，我把它归纳为以下几点:</p><p>1、每一个构造函数都有自己的prototype(显式原型)属性，指向一个普通对象<br>2、每一个实例都有自己的<strong>proto</strong>(隐式原型)属性，指向内部的[[proto]],最终也指向其构造函数的prototype.<br>3、原型也可以拥有自己的属性，可以用自己的constractor属性指回相应的构造函数</p><p>这三条规则规定了原型链的运作规则</p><h2 id="鸡生蛋？蛋生鸡？"><a href="#鸡生蛋？蛋生鸡？" class="headerlink" title="鸡生蛋？蛋生鸡？"></a>鸡生蛋？蛋生鸡？</h2><p>不过若是细心的话，可以发现上面的图里面还有一个function.prototype，那是因为所有的函数都是由Function构造函数所创建的实例，而奇怪的是，图中的Function构造函数的<strong>proto</strong>与prototype所指向的是同一个对象，这就存在疑惑了，难道Function的构造函数是其自身？<br>实际上并不是，javascript环境初始化时，会自动创建Function和Object，并不会存在鸡生蛋，蛋生鸡的问题</p>]]></content>
<summary type="html">
<p>首先先看一张图:<br><figure class="image-bubble">
<div class="img-lightbox">
<div class="overlay"></div>
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>诗歌闲谈（一）</title>
<link href="http://yoursite.com/2019/01/16/%E8%AF%97%E6%AD%8C%E9%97%B2%E8%B0%88%EF%BC%88%E4%B8%80%EF%BC%89/"/>
<id>http://yoursite.com/2019/01/16/诗歌闲谈（一）/</id>
<published>2019-01-16T03:11:36.000Z</published>
<updated>2019-01-16T03:12:40.282Z</updated>
<content type="html"><![CDATA[<p>《闲谈》<br> ———wintercomming<br>待日月无光华，<br>望朝晚无弥霞。<br>却问，<br>你要去哪？</p><p>若心灵而不静，<br>似叶落而不停。<br>但曰，<br>我心空明。</p><p>念我心之空悠，<br>点流水之忧愁。<br>话是，<br>人道风流。</p>]]></content>
<summary type="html">
<p>《闲谈》<br> ———wintercomming<br>待日月无光华，<br>望朝晚无弥霞。<br>却问，<br>你要去哪？</p>
<p>若心灵而不静，<br>似叶落而不停。<br>但曰，<br>我心空明。</p>
<p>念我心之空悠，<br>点流水之忧愁。<
</summary>
<category term="诗歌闲谈" scheme="http://yoursite.com/tags/%E8%AF%97%E6%AD%8C%E9%97%B2%E8%B0%88/"/>
</entry>
<entry>
<title>动画相关总结</title>
<link href="http://yoursite.com/2019/01/15/%E5%8A%A8%E7%94%BB%E7%9B%B8%E5%85%B3%E6%80%BB%E7%BB%93/"/>
<id>http://yoursite.com/2019/01/15/动画相关总结/</id>
<published>2019-01-15T05:01:32.000Z</published>
<updated>2019-01-17T09:12:22.539Z</updated>
<content type="html"><![CDATA[<h2 id="CSS动画"><a href="#CSS动画" class="headerlink" title="CSS动画"></a>CSS动画</h2><p> 随着CSS3和HTML5以及新时代移动端前端时代的来临，CSS3几乎成为了所有前端工程师必备的技能之一，而其中最核心也最常用的新特性之一便是CSS3动画了，这篇文章也是本人对于CSS动画的总结与思考</p><h3 id="重绘-repaint-、重排-relayout-与重组-recomposite"><a href="#重绘-repaint-、重排-relayout-与重组-recomposite" class="headerlink" title="重绘(repaint)、重排(relayout)与重组(recomposite)"></a>重绘(repaint)、重排(relayout)与重组(recomposite)</h3><p>首先，我们需要了解重绘(repaint)、重排(relayout)、重组(recomposite)的概念:<br>最常见的区别:<br>document.write:重排整个页面<br>innerHTML:重绘部分页面<br>1.重绘(repaint)<br>重绘定义:完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘</p><p>重绘是以上三种方法中消耗性能最高的方式，所以在项目中应该尽量避免重绘，常用的有尽量使用webkit-transform: translateX(3em)的方案代替使用left: 3em ，因为left会触发重排(relayout)与重绘(repaint)，而webkit-transform只触发页面重组(recomposite)</p><p>当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。</p><p>触发重绘的条件：改变元素外观属性。如：color，background-color等。</p><p>重排定义:当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。</p><p>触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如:<br> 1、页面渲染初始化；(无法避免)</p><p> 2、添加或删除可见的DOM元素；</p><p> 3、元素位置的改变，或者使用动画；</p><p> 4、元素尺寸的改变——大小，外边距，边框；</p><p> 5、浏览器窗口尺寸的变化（resize事件发生时）；</p><p> 6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；</p><p> 7、读取某些元素属性：（offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )</p><p>重排必定会引发重绘，但重绘不一定会引发重排。</p><h3 id="requestAnimationFrame"><a href="#requestAnimationFrame" class="headerlink" title="requestAnimationFrame"></a>requestAnimationFrame</h3><p>这是一个在我印象中并不常用的JavaScript API,之所以放在这里是因为其特殊特性在接下来的时间内值得好好运用</p><p>requestAnimationFrame主要用途是按帧对网页进行重绘，即每一帧都刷新一次，提高动画的流畅度</p><p>以下是此api的使用及兼容</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></pre></td><td class="code"><pre><span class="line">window.requestAnimFrame=(<span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> <span class="built_in">return</span> window.requestAnimationFrame||</span><br><span class="line"> window.webkitRequestAnimationFrame||</span><br><span class="line"> window.mozRequestAnimationFrame||</span><br><span class="line"> window.oRequestAnimationFrame||</span><br><span class="line"> window.msRequestAnimationFrame||</span><br><span class="line"> <span class="keyword">function</span>(callback){</span><br><span class="line"> window.setTimeout(callback,1000/60) //适应刷新频率为60hz的屏幕</span><br><span class="line"> }</span><br><span class="line">})();</span><br></pre></td></tr></table></figure><p>上面的函数内最后一个选项是为了兼容ie浏览器所返回的对应的函数，不过此方法有一个缺陷，就是无法适应不同频率的屏幕，无法达到对应屏幕的理想帧数<br>另外值得注意的是，W3C认为requestAnimationFrame是一个宏任务(marcotask),在实际运用中要注意</p><h2 id="transition-过渡-动画"><a href="#transition-过渡-动画" class="headerlink" title="transition(过渡)动画"></a>transition(过渡)动画</h2><p>transition(过渡)是CSS3动画规范内的一种</p><p>如:<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><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">img{</span><br><span class="line"> height:100px;</span><br><span class="line"> trasition: 1s 1s height ease;</span><br><span class="line">}</span><br><span class="line">img:hover{</span><br><span class="line">height:300px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>也就是说，规定了transition动画的元素上对其样式进行的修改都会变成以动画的形式</p><p>transition也有其局限性</p><p>1.transition需要事件触发，无法像@keyframe一样自动播放<br>2.transition是一次性的，无法自动重复发生，<br>3.transition只能定义开始状态和结束状态，也就是说，用transition无法创建有多个过渡状态的复杂动画<br>4.一条transition,只能定义一个属性的变化</p><p>小技巧：显然，通过以上描述，transition可以归结为制作简单动画的首选，而不负众望，其性能尤其是在移动端上的性能尤为可观，大大提高了用户体验，所以在制作简单动画的过程中尽量使用transition。</p><p>使用transition的另一个好处是可以通过js来控制动画，具体可以观看之前在百度IFE上的博文:<a href="http://ife.baidu.com/note/detail/id/2478" title="博文地址" target="_blank" rel="noopener">博文地址</a></p><h2 id="animation动画"><a href="#animation动画" class="headerlink" title="animation动画"></a>animation动画</h2><p>animation使用@keyframe来定义动画，最后绑定在对应元素的样式上来产生效果，如:</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></pre></td><td class="code"><pre><span class="line">@keyframe move{</span><br><span class="line"> 0% {</span><br><span class="line"> width:200px;</span><br><span class="line"> }</span><br><span class="line"> 50% {</span><br><span class="line"> width:100px;</span><br><span class="line"> }</span><br><span class="line"> 100%{</span><br><span class="line"> width:200px;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line">div{</span><br><span class="line"> width:100px;</span><br><span class="line">}</span><br><span class="line">div:hover{</span><br><span class="line"> animation:1s move</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>animation动画的内容更为丰富，可以用animation-delay规定动画何时开始，animation-iteration-count规定动画播放次数，animation-play-state规定动画当前应该状态</p>]]></content>
<summary type="html">
<h2 id="CSS动画"><a href="#CSS动画" class="headerlink" title="CSS动画"></a>CSS动画</h2><p> 随着CSS3和HTML5以及新时代移动端前端时代的来临，CSS3几乎成为了所有前端工程师必备的技能之一，而其中最核
</summary>
<category term="CSS" scheme="http://yoursite.com/tags/CSS/"/>
</entry>
<entry>
<title>javascript的执行上下文与执行机制</title>
<link href="http://yoursite.com/2019/01/15/javascript%E7%9A%84%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87%E4%B8%8E%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6/"/>
<id>http://yoursite.com/2019/01/15/javascript的执行上下文与执行机制/</id>
<published>2019-01-15T04:11:08.000Z</published>
<updated>2019-01-17T03:00:27.928Z</updated>
<content type="html"><![CDATA[<h2 id="关于这个系列"><a href="#关于这个系列" class="headerlink" title="关于这个系列"></a>关于这个系列</h2><p> javascript语言有很多奥秘，譬如其运行机制，内部原理，在历史的这一段日子里，它不仅带来了复杂的交互效果和充分的性能效益，而且吸引了越来越多的开发者加入其中，但是随着时间进程的发展，很多时候开发者们因为花样繁复的JS库与框架而忽略了JS本身的内部机制。无可厚非，这样做是增加了效率，但是随着Web的蓬勃发展和JS社区的踊跃贡献，JS的思想和创造年年翻新，现有的一切被淘汰也是时间的问题。所以开发者花费时间去研究其语言的内部机制是一个不被社会洪流淘汰的最佳选择，而本系列恰好记录了本人对于JS的理解和思考，会陆续将所学更新于此，希望对大家有所帮助。</p><p> 受水平和技术有限，灵感和部分例子来自于Github里《JavaScript开发者应懂的33个概念》系列集合，有兴趣的可以在github里面找到这个合集查看完整的讲解。</p><h2 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h2><p> 这是一个很难具体阐述的概念，而且绕口的文字也让很多人费解，我也很难阐述他究竟是个什么东西，为什么取了个这样的名字，但是我认为执行上下文就是javascript所运行的整个环境，它将整个js文件的一些段落或某一个段落包裹起来，分别执行，可以把它理解为某一段代码是在怎么样的一个地方去执行的，如果感觉非常费解，其实你可以把整个js文件比喻成一个房屋，房屋里面拥有着不同的居住环境，不信你可以看看执行上下文的种类在房屋内充当了什么样的位置：</p><p> 1.全局执行上下文</p><p> 全局执行上下文就是属于最外层的上下文，简单的说就是除了函数里面的上下文，初始化全局执行上下文的时候它会做两件事情，会创建一个window对象，并且把this指向window对象，整个全局环境都属于全局执行上下文的环境，怎么去理解呢？想象一下刚刚上面我所说的房屋，对于整个JS文件而言他就是整个房屋，而全局执行上下文就好像人所能够移动的区域，客厅，厨房和饭厅就像一段段代码，我们的浏览器或者node环境也就是查房员，他负责查房后汇报房间里拥有什么东西，直到从门口开始把每一个房间都走完。</p><p> 2.函数执行上下文</p><p> 函数执行上下文就是全局执行上下文所不能执行的地方，它往往存在与函数内部，全局在遇到这种环境时会避开它，就好像房间里的鱼缸，鸟窝，它们都是鱼和鸟活动的区域，在调用整个函数时，查房人就会往里面放上相应的动物，直到它们把整个环境走完以后再取出来，这些动物不仅有自己的语言，行为和动作，而鸟笼，鱼缸，狗窝它们大小也不一，当关上门时它们的世界就和整个房屋隔绝了开来，我们称这一些地方叫做函数执行上下文。</p><p> 3.eval函数上下文</p><p> eval函数会将一段字符串当做JS代码来执行，而它自己也有属于自己的上下文，这就好像一个便携帐篷，在需要的时候把它在房屋里面打开，拥有了属于自己内部的区域；</p><h2 id="执行栈"><a href="#执行栈" class="headerlink" title="执行栈"></a>执行栈</h2><p> 刚刚说了执行上下文的概念，但是不少人会注意到有一个缺陷，就是我们如何把鱼放入鱼缸，鸟放入鸟窝跑一个遍呢？或者说我鱼缸里面的虾窝，狗窝毛毯上的跳蚤窝又是怎么去查看的呢？其实这就引入了我们执行栈的概念；而管理员就是通过这个东西把它们放入对应的地方汇报信息的。</p><p> 要搞懂执行栈，首先要理解栈是一个什么东西，有人会说栈是一种基本数据结构，先入先出，但本人就经常把队列和栈搞混(可能比较愚笨),但是笨有笨的方法，我可以想象，我把栈看成是军队训练时要爬的人墙，每次要爬山墙的人都是最后一个进入人墙，但是确实最先一个离开人墙，执行栈也是一样，全局执行上下文就相当于栈的底部，而每次执行到某个函数，其内部的函数上下文就会跳到全局的身上，执行完成便翻过这道墙，当然函数上下文里面的函数执行也是一样，他会跳到上一个函数上下文上边，这就形成了一个FQ的机制直到整个墙翻完为止。</p><p> 对于常理来说，是这样，但是总有一些奇怪的人，想自己组成一个小团队，他们为了不影响别人，决定在大部队翻过墙以后再自己FQ，这些小团队有可能是一个人也有可能是几个人，而这就牵扯到了JS的异步</p><p>异步<br> 异步是一个特殊的概念，在javascript中，整个语言的执行是单线程的，就是一次只能够做一次事情，而一些特殊的事情为了不影响其他事情的执行他们选择等待，当其他事情执行结束时他再去执行自己，一切都是这么的规范和有理，和现实中的混乱相距甚远；</p><p> 而这一批有礼貌的事情是哪一些呢？</p><p> 1.setTimeout 2.promise 3.事件绑定 4.ajax 5.回调函数</p><p> 他们都很有礼貌，每次都会等到执行完成后再去执行自身，至少我之前是这么认为的；</p><p> 慢慢的和他们相处长了以后，我发现，有一些伪君子，他们虽然也在最后执行，但是他们会插到所有有礼貌的人最前面，也就是说，他们在所有异步的成员里面首先执行，而这就牵扯到了微任务和宏任务的问题了</p><p> 而微任务就是这一批伪君子，这使我不得不介绍一下他们：</p><p> micro-task(微任务)：Promise，process.nextTick，Object.observe</p><p> 下面这张图是从掘金《这一次，彻底弄懂 JavaScript 执行机制》一文中copy所得，方便大家理解微任务和宏任务<br> <img src="https://user-gold-cdn.xitu.io/2017/11/21/15fdcea13361a1ec?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="执行上下文与执行机制"><br> 此文到这里就结束了，相信大家也初步理解了机制，很多东西需要代码才能辅助理解，代码我会在之后补上，先告一段落</p>]]></content>
<summary type="html">
<h2 id="关于这个系列"><a href="#关于这个系列" class="headerlink" title="关于这个系列"></a>关于这个系列</h2><p> javascript语言有很多奥秘，譬如其运行机制，内部原理，在历史的这一段日子里，它不仅带来了复杂的
</summary>
<category term="javascript基础" scheme="http://yoursite.com/tags/javascript%E5%9F%BA%E7%A1%80/"/>
</entry>
</feed>