cainiaoblog 23.2.344 → 23.2.346
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/appConfigs/config +1 -1
- package/article/10745.html +3 -3
- package/article/14192.html +1 -1
- package/article/15569.html +2 -2
- package/article/17575.html +1 -1
- package/article/179.html +2 -2
- package/article/19909.html +3 -3
- package/article/20093.html +1 -1
- package/article/2021.html +5 -5
- package/article/21782.html +3 -3
- package/article/22230.html +1 -1
- package/article/22422.html +1 -1
- package/article/22565.html +1 -1
- package/article/23046.html +1 -1
- package/article/23083.html +1 -1
- package/article/23195.html +1 -1
- package/article/23914.html +2 -2
- package/article/25164.html +1 -1
- package/article/25710.html +3 -3
- package/article/26639.html +4 -4
- package/article/31330.html +2 -2
- package/article/36251.html +1 -1
- package/article/38005.html +2 -2
- package/article/38530.html +1 -1
- package/article/39637.html +2 -2
- package/article/419.html +2 -2
- package/article/45641.html +2 -2
- package/article/46911.html +1 -1
- package/article/4783.html +3 -3
- package/article/48216.html +1 -1
- package/article/48252.html +1 -1
- package/article/50343.html +1 -1
- package/article/5204.html +2 -2
- package/article/52500.html +1 -1
- package/article/53428.html +1 -1
- package/article/53962.html +1 -1
- package/article/54258.html +3 -3
- package/article/54313.html +2 -2
- package/article/55756.html +2 -2
- package/article/56816.html +2 -2
- package/article/57965.html +5 -5
- package/article/59402.html +3 -3
- package/article/60327.html +2 -2
- package/article/63266.html +2 -2
- package/atom.xml +21 -21
- package/baidusitemap.xml +488 -488
- package/package.json +1 -1
- package/page/14/index.html +1 -1
- package/search.xml +43 -43
- package/sitemap.xml +365 -365
package/article/25710.html
CHANGED
|
@@ -148,7 +148,7 @@ read().then((data) => {
|
|
|
148
148
|
<p>思考一下 async/await 如何处理异步并发问题的？ <a target="_blank" rel="noopener" href="https://github.com/YvetteLau/Blog/blob/master/JS/Async/index.js">https://github.com/YvetteLau/Blog/blob/master/JS/Async/index.js</a></p>
|
|
149
149
|
<p>如果你有更好的答案或想法，欢迎在这题目对应的github下留言：<a target="_blank" rel="noopener" href="https://github.com/YvetteLau/Blog/issues/10">说一说JS异步发展史</a></p>
|
|
150
150
|
<hr>
|
|
151
|
-
<h3 id="2-谈谈对-async-
|
|
151
|
+
<h3 id="2-谈谈对-async-await-的理解，async-await-的实现原理是什么"><a href="#2-谈谈对-async-await-的理解，async-await-的实现原理是什么" class="headerlink" title="2.谈谈对 async/await 的理解，async/await 的实现原理是什么?"></a>2.谈谈对 async/await 的理解，async/await 的实现原理是什么?</h3><p>async/await 就是 Generator 的语法糖，使得异步操作变得更加方便。来张图对比一下:</p>
|
|
152
152
|
<p><a target="_blank" rel="noopener" href="https://camo.githubusercontent.com/bfc3602899e269cd425732846fb928b62b5aa5cf/68747470733a2f2f6e6f74652e796f7564616f2e636f6d2f7977732f7075626c69632f7265736f757263652f66343537303163633431303530346537316462626362643838363165386430632f786d6c6e6f74652f5745425245534f5552434564316332353132343739373437633530643035616432613930666434333536372f3239343932"><img src="https://camo.githubusercontent.com/bfc3602899e269cd425732846fb928b62b5aa5cf/68747470733a2f2f6e6f74652e796f7564616f2e636f6d2f7977732f7075626c69632f7265736f757263652f66343537303163633431303530346537316462626362643838363165386430632f786d6c6e6f74652f5745425245534f5552434564316332353132343739373437633530643035616432613930666434333536372f3239343932" alt="xuehuayu.cn"></a></p>
|
|
153
153
|
<p>async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成await。</p>
|
|
154
154
|
<blockquote>
|
|
@@ -200,7 +200,7 @@ my_co(test()).then(data=> {
|
|
|
200
200
|
</code></pre>
|
|
201
201
|
<p>如果你有更好的答案或想法，欢迎在这题目对应的github下留言：<a target="_blank" rel="noopener" href="https://github.com/YvetteLau/Blog/issues/11">谈谈对 async/await 的理解，async/await 的实现原理是什么?</a></p>
|
|
202
202
|
<hr>
|
|
203
|
-
<h3 id="3-使用-async-
|
|
203
|
+
<h3 id="3-使用-async-await-需要注意什么？"><a href="#3-使用-async-await-需要注意什么？" class="headerlink" title="3.使用 async/await 需要注意什么？"></a>3.使用 async/await 需要注意什么？</h3><ol>
|
|
204
204
|
<li><p>await 命令后面的Promise对象，运行结果可能是 rejected，此时等同于 async 函数返回的 Promise 对象被reject。因此需要加上错误处理，可以给每个 await 后的 Promise 增加 catch 方法；也可以将 await 的代码放在 <code>try...catch</code> 中。</p>
|
|
205
205
|
</li>
|
|
206
206
|
<li><p>多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。</p>
|
|
@@ -312,7 +312,7 @@ for(let item of obj) {
|
|
|
312
312
|
</ul>
|
|
313
313
|
<p>如果你有更好的答案或想法，欢迎在这题目对应的github下留言：<a target="_blank" rel="noopener" href="https://github.com/YvetteLau/Blog/issues/14">可遍历数据结构的有什么特点？</a></p>
|
|
314
314
|
<hr>
|
|
315
|
-
<h3 id="6-requestAnimationFrame-和-setTimeout-
|
|
315
|
+
<h3 id="6-requestAnimationFrame-和-setTimeout-setInterval-有什么区别？使用-requestAnimationFrame-有哪些好处？"><a href="#6-requestAnimationFrame-和-setTimeout-setInterval-有什么区别？使用-requestAnimationFrame-有哪些好处？" class="headerlink" title="6.requestAnimationFrame 和 setTimeout/setInterval 有什么区别？使用 requestAnimationFrame 有哪些好处？"></a>6.requestAnimationFrame 和 setTimeout/setInterval 有什么区别？使用 requestAnimationFrame 有哪些好处？</h3><p>在 requestAnimationFrame 之前，我们主要使用 setTimeout/setInterval 来编写JS动画。</p>
|
|
316
316
|
<p>编写动画的关键是循环间隔的设置，一方面，循环间隔足够短，动画效果才能显得平滑流畅；另一方面，循环间隔还要足够长，才能确保浏览器有能力渲染产生的变化。</p>
|
|
317
317
|
<p>大部分的电脑显示器的刷新频率是60HZ，也就是每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会提升。因此，最平滑动画的最佳循环间隔是 1000ms / 60 ，约为16.7ms。</p>
|
|
318
318
|
<p>setTimeout/setInterval 有一个显著的缺陷在于时间是不精确的，setTimeout/setInterval 只能保证延时或间隔不小于设定的时间。因为它们实际上只是把任务添加到了任务队列中，但是如果前面的任务还没有执行完成，它们必须要等待。</p>
|
package/article/26639.html
CHANGED
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
<h3 id="ajax跨域的表现"><a href="#ajax跨域的表现" class="headerlink" title="ajax跨域的表现"></a>ajax跨域的表现</h3><p>说实话，当初整理过一篇文章，然后作为了一个解决方案，但是后来发现仍然有很多人还是不会。无奈只能耗时又耗力的调试。然而就算是我来分析，也只会根据对应的表现来判断是否是跨域，因此这一点是很重要的。</p>
|
|
72
72
|
<p>ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现:(注意，是ajax请求，请不要说为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是不行的)</p>
|
|
73
73
|
<p>注意:具体的后端跨域配置请看题纲位置。</p>
|
|
74
|
-
<h4 id="第一种现象-No-
|
|
74
|
+
<h4 id="第一种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且The-response-had-HTTP-status-code-404"><a href="#第一种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且The-response-had-HTTP-status-code-404" class="headerlink" title="第一种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404"></a>第一种现象:<code>No 'Access-Control-Allow-Origin' header is present on the requested resource</code>,并且<code>The response had HTTP status code 404</code></h4><p><img src="https://user-gold-cdn.xitu.io/2017/12/18/1606891015172eb0?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>出现这种情况的原因如下：</p>
|
|
75
75
|
<ul>
|
|
76
76
|
<li><p>本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)</p>
|
|
77
77
|
</li>
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
</li>
|
|
80
80
|
</ul>
|
|
81
81
|
<p>解决方案: 后端允许options请求</p>
|
|
82
|
-
<h4 id="第二种现象-No-
|
|
82
|
+
<h4 id="第二种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且The-response-had-HTTP-status-code-405"><a href="#第二种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且The-response-had-HTTP-status-code-405" class="headerlink" title="第二种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 405"></a>第二种现象:<code>No 'Access-Control-Allow-Origin' header is present on the requested resource</code>,并且<code>The response had HTTP status code 405</code></h4><p><img src="https://user-gold-cdn.xitu.io/2017/12/18/1606891017123a05?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如<code>安全配置</code>),阻止了OPTIONS请求,才会导致这个现象</p>
|
|
83
83
|
<p>解决方案: 后端关闭对应的安全配置</p>
|
|
84
|
-
<h4 id="第三种现象-No-
|
|
84
|
+
<h4 id="第三种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且status-200"><a href="#第三种现象-No-Access-Control-Allow-Origin-header-is-present-on-the-requested-resource-并且status-200" class="headerlink" title="第三种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且status 200"></a>第三种现象:<code>No 'Access-Control-Allow-Origin' header is present on the requested resource</code>,并且<code>status 200</code></h4><p><img src="https://user-gold-cdn.xitu.io/2017/12/18/1606891014ed6877?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象</p>
|
|
85
85
|
<p>比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错</p>
|
|
86
86
|
<p>解决方案: 后端增加对应的头部支持</p>
|
|
87
|
-
<h4 id="第四种现象-heade-contains-multiple-values
|
|
87
|
+
<h4 id="第四种现象-heade-contains-multiple-values"><a href="#第四种现象-heade-contains-multiple-values" class="headerlink" title="第四种现象:heade contains multiple values '*,*'"></a>第四种现象:<code>heade contains multiple values '*,*'</code></h4><p><img src="https://user-gold-cdn.xitu.io/2017/12/18/16068910151429a0?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><img src="https://user-gold-cdn.xitu.io/2017/12/18/160689101708399f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>表现现象是，后台响应的http头部信息有两个<code>Access-Control-Allow-Origin:*</code></p>
|
|
88
88
|
<p>说实话，这种问题出现的主要原因就是进行跨域配置的人不了解原理，导致了重复配置，如:</p>
|
|
89
89
|
<ul>
|
|
90
90
|
<li><p>常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin(比如代码手动设置了返回*))</p>
|
package/article/31330.html
CHANGED
|
@@ -241,7 +241,7 @@ console.log(ids.next().value);
|
|
|
241
241
|
// 2
|
|
242
242
|
// etc...
|
|
243
243
|
</code></pre>
|
|
244
|
-
<h2 id="8
|
|
244
|
+
<h2 id="8-恒等运算符-与相等运算符"><a href="#8-恒等运算符-与相等运算符" class="headerlink" title="8.恒等运算符(===)与相等运算符(==)"></a>8.恒等运算符(===)与相等运算符(==)</h2><p>大家一定要知道JavaScript中的恒等运算符（<code>===</code>）和相等运算符（<code>==</code>）之间的区别！ <code>==</code>运算符在比较值之前会进行类型转换，而<code>===</code>运算符在比较之前不会进行任何类型转换。</p>
|
|
245
245
|
<pre><code>console.log(0 == '0');
|
|
246
246
|
// true
|
|
247
247
|
console.log(0 === '0');
|
|
@@ -297,7 +297,7 @@ myPromise
|
|
|
297
297
|
// If Math.random() returns 0.9 or greater the following is logged:
|
|
298
298
|
// "Error: On no!"
|
|
299
299
|
</code></pre>
|
|
300
|
-
<h2 id="12-Async-
|
|
300
|
+
<h2 id="12-Async-Await"><a href="#12-Async-Await" class="headerlink" title="12. Async/Await"></a>12. Async/Await</h2><p>在掌握了 promise 的用法后，你可能也会喜欢 <code>async await</code>，它只是一种基于 promise 的“语法糖”。在下面的示例中，我们创建了一个 <code>async</code> 函数，并 await greeter promise。</p>
|
|
301
301
|
<pre><code>const greeter = new Promise((res, rej) => {
|
|
302
302
|
setTimeout(() => res('Hello world!'), 2000);
|
|
303
303
|
})
|
package/article/36251.html
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<h3 id="HTTP-的起源"><a href="#HTTP-的起源" class="headerlink" title="HTTP 的起源"></a>HTTP 的起源</h3><p>HTTP 最初是 Tim BernersLee 1989 年在欧洲核子研究组织（CERN）所发起的。Tim BernersLee 提出了一种能让远隔两地的研究者们共享知识的设想。这个设想的基本理念是：借助多文档之间相互关联形成的超文本（HyperText），连成可相互参阅的 WWW（World Wide Web，万维网）。用于传输的超文本传输协议（HyperText Transfer Protocol），即 HTTP 由此诞生。<br>WWW 这一名称，是 Web 浏览器当年用来浏览超文本的客户端应用程序时的名称。现在则用来表示这一系列的集合，也可简称为 Web。</p>
|
|
23
23
|
<p>HTTP 本身是一个简单的请求-响应协议，它通常运行在 TCP 之上。从整个网络模型来看，HTTP 是应用层的一个协议。在 OSI 七层模型中，HTTP 位于最上层。它并不涉及数据包的传输，只是规定了客户端和服务器之间的通信格式。定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以 ASCII 码形式给出。</p>
|
|
24
24
|
<p>HTTP 采用 BS 架构，也就是浏览器到服务器的架构，客户端通过浏览器发送 HTTP 请求给服务器，服务器经过解析响应客户端的请求。就是这个简单实用的模型，使得 HTTP 这个基于 TCP/IP 的协议迅速推广。</p>
|
|
25
|
-
<h3 id="HTTP-
|
|
25
|
+
<h3 id="HTTP-0-9-到-HTTP-1-1"><a href="#HTTP-0-9-到-HTTP-1-1" class="headerlink" title="HTTP/0.9 到 HTTP/1.1"></a>HTTP/0.9 到 HTTP/1.1</h3><p>HTTP 的演化并不是一蹴而就的。当年 HTTP 的出现主要是为了解决文本传输的难题。由于协议本身非常简单，于是在此基础上设想了很多应用方法并投入了实际使用。现在 HTTP 已经超出了 Web 这个框架的局限，被运用到了各种场景里。</p>
|
|
26
26
|
<blockquote>
|
|
27
27
|
<p>HTTP/0.9</p>
|
|
28
28
|
</blockquote>
|
package/article/38005.html
CHANGED
|
@@ -111,7 +111,7 @@ console.log(arry2);//[ { name: 10 }, { age: 20, name: 10 } ]
|
|
|
111
111
|
<p>Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。</p>
|
|
112
112
|
<hr>
|
|
113
113
|
<blockquote>
|
|
114
|
-
<h3 id="6
|
|
114
|
+
<h3 id="6-和-有什么区别？"><a href="#6-和-有什么区别？" class="headerlink" title="6. == 和 === 有什么区别？"></a>6. == 和 === 有什么区别？</h3></blockquote>
|
|
115
115
|
<p>=== 不需要进行类型转换，只有类型相同并且值相等时，才返回 true.</p>
|
|
116
116
|
<p>== 如果两者类型不同，首先需要进行类型转换。具体流程如下:</p>
|
|
117
117
|
<ol>
|
|
@@ -555,7 +555,7 @@ SubType.prototype.sayAge=function() {
|
|
|
555
555
|
<p>HTML5标准规定了 setTimeout() 的第二个参数的最小值不得小于4毫秒，如果低于这个值，则默认是4毫秒。在此之前。老版本的浏览器都将最短时间设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常是间隔16毫秒执行。这时使用 requestAnimationFrame() 的效果要好于 setTimeout();</p>
|
|
556
556
|
<hr>
|
|
557
557
|
<blockquote>
|
|
558
|
-
<h3 id="26-为什么-0-1-0-2-
|
|
558
|
+
<h3 id="26-为什么-0-1-0-2-0-3"><a href="#26-为什么-0-1-0-2-0-3" class="headerlink" title="26. 为什么 0.1 + 0.2 != 0.3 ?"></a>26. 为什么 0.1 + 0.2 != 0.3 ?</h3></blockquote>
|
|
559
559
|
<p>0.1 + 0.2 != 0.3 是因为在进制转换和进阶运算的过程中出现精度损失。</p>
|
|
560
560
|
<p>下面是详细解释:</p>
|
|
561
561
|
<p>JavaScript使用 Number 类型表示数字(整数和浮点数)，使用64位表示一个数字。</p>
|
package/article/38530.html
CHANGED
|
@@ -160,7 +160,7 @@ __webpack_require__.o=function(object,property){returnObject.prototype.hasO
|
|
|
160
160
|
<p>除了 ES6 Module 规范，Webpack 同样支持 CommonJS 与 AMD 规范，你可以替换模块化规范，重新打包来观察它们的区别。</p>
|
|
161
161
|
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>好了，我们用流程图总结一下 Webpack 模块的加载思路：</p>
|
|
162
162
|
<p><img src="https://pic4.zhimg.com/v2-dbd5e17901ad814d0757ad67ad58047f_b.jpg" alt="xuehuayu.cn"><img src="https://pic4.zhimg.com/80/v2-dbd5e17901ad814d0757ad67ad58047f_hd.jpg" alt="xuehuayu.cn"></p>
|
|
163
|
-
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://link.zhihu.com/?target=https://webpack.js.org/glossary/%23m">Glossary
|
|
163
|
+
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://link.zhihu.com/?target=https://webpack.js.org/glossary/%23m">Glossary​webpack.js.org</a></p>
|
|
164
164
|
</div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/38530.html">https://xuehuayu.cn/article/38530.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/22565.html">使用 Hooks 优化 React 组件</a><a class="next" href="/article/64051.html">48个 JS 开发常用工具函数</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
|
|
165
165
|
const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
|
|
166
166
|
const locale = {
|
package/article/39637.html
CHANGED
|
@@ -184,7 +184,7 @@ const Number = (props) => {
|
|
|
184
184
|
<p>以上代码也会输出 <code>“Hello World”</code>。</p>
|
|
185
185
|
<p><code>state</code> 实例属性是一个特殊属性，因为 React 会管理它。 你只能通过 <code>setState</code> 更改它，当你这样做时 React 会做出响应。</p>
|
|
186
186
|
<p>然而，定义的所有其他实例属性对渲染算法没有影响。 你可以根据需要在上面的示例中更改<code>this.user</code>，并且 React 不会在React中触发渲染机制。</p>
|
|
187
|
-
<h2 id="13
|
|
187
|
+
<h2 id="13-将-与-搞混"><a href="#13-将-与-搞混" class="headerlink" title="13. 将 与</ tag> 搞混"></a>13. 将 <tag />与</ tag> 搞混</h2><p>在闭合标签里放错 <code>/</code> 字符。不可否认，有时你可以使用 <code><tag/></code>，而其他时间你需要<code></tag></code>。</p>
|
|
188
188
|
<p>在 HTML 中，有一种称为“自闭合标签”（AKA void tag）。这些是表示没有任何子节点的元素的标记。例如，img 标签是一个自闭合标签：</p>
|
|
189
189
|
<pre><code><img src="..." />
|
|
190
190
|
// 不必使用 <img></img>
|
|
@@ -210,7 +210,7 @@ const Number = (props) => {
|
|
|
210
210
|
<p>如果放错放了 / 字符的位置，将收到如下错误：</p>
|
|
211
211
|
<pre><code>Syntax error: Unterminated JSX contents
|
|
212
212
|
</code></pre>
|
|
213
|
-
<h2 id="14-假设-import-
|
|
213
|
+
<h2 id="14-假设-import-export-起作用"><a href="#14-假设-import-export-起作用" class="headerlink" title="14. 假设 import/export 起作用"></a>14. 假设 import/export 起作用</h2><p><code>import/export</code> 特性是 JavaScript 中的官方功能（自2015年起）。 其只是 ES2015 的特性，并且还没有在流行浏览器和最新版 Node 里面被完整支持。</p>
|
|
214
214
|
<p>React 项目的流行配置使用 Webpack 和 Babel。 两者都允许使用此特性并将其编译为所有浏览器都能理解的内容。 只有工作流中有 Webpack 或 Babel 之类的转译工具，才能使用 <code>import/export</code>。</p>
|
|
215
215
|
<p>但是，在 React 打包应用程序中 import/export 不意味着可以随意使用它们！ 例如，如果你还通过最新的 Node 进行服务器端渲染，会行不通，你很可能会收到<code>“unexpected token”</code> 错误。</p>
|
|
216
216
|
<p>要让 Node 理解 <code>import/export</code>（如果你在前端使用它们就是你需要了解它们，并且也想要做 SSR 渲染的话），你需要有可以编译其的 Babel preset（像是_env_ preset），才能在Node 端运行。 你可以在开发时使用像 <em>pm2_、 _nodemon</em> 和 _babel-watch_的工具做到这点，，并在每次更改内容时重新启动 Node。</p>
|
package/article/419.html
CHANGED
|
@@ -502,7 +502,7 @@ console.log(calculateExponent(2, 10)); // 输出1024console.log(Math.pow(2, 10))
|
|
|
502
502
|
<li><code>Object.getOwnPropertyDescriptors()</code></li>
|
|
503
503
|
<li><code>ShareArrayBuffer</code>和<code>Atomics</code>对象，用于从共享内存位置读取和写入</li>
|
|
504
504
|
</ul>
|
|
505
|
-
<h3 id="1-async-
|
|
505
|
+
<h3 id="1-async-await"><a href="#1-async-await" class="headerlink" title="1.async/await"></a>1.async/await</h3><p>ES2018引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了<code>next()</code>方法返回一个Promise。因此<code>await</code>可以和<code>for...of</code>循环一起使用，以串行的方式运行异步操作。例如：</p>
|
|
506
506
|
<pre><code>asyncfunctionprocess(array) {
|
|
507
507
|
forawait (let i of array) {
|
|
508
508
|
doSomething(i);
|
|
@@ -717,7 +717,7 @@ Object.getOwnPropertyDescriptors(obj2)
|
|
|
717
717
|
}
|
|
718
718
|
复制代码
|
|
719
719
|
</code></pre>
|
|
720
|
-
<h3 id="3-Rest-
|
|
720
|
+
<h3 id="3-Rest-Spread-属性"><a href="#3-Rest-Spread-属性" class="headerlink" title="3.Rest/Spread 属性"></a>3.Rest/Spread 属性</h3><p>ES2015引入了<a href="https://link.juejin.im/?target=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Rest参数</a>和<a href="https://link.juejin.im/?target=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax">扩展运算符</a>。三个点（…）仅用于数组。Rest参数语法允许我们将一个不定数量的参数表示为一个数组。</p>
|
|
721
721
|
<pre><code>restParam(1, 2, 3, 4, 5);
|
|
722
722
|
|
|
723
723
|
functionrestParam(p1, p2, ...p3) {
|
package/article/45641.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
})();
|
|
17
17
|
</script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
|
|
18
18
|
</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
|
|
19
|
-
</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/cainiaoblog@latest/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">chrome调试技巧</h1><div class="post-meta"><span class="date">2020-01-09</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count">
|
|
19
|
+
</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/cainiaoblog@latest/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">chrome调试技巧</h1><div class="post-meta"><span class="date">2020-01-09</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 7</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/45641.html#vcomment"><span class="waline-comment-count" data-path="/article/45641.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://segmentfault.com/a/1190000016256731</code></p>
|
|
20
20
|
<blockquote>
|
|
21
21
|
<p><strong>写在前面</strong><br>本文包括浏览器调试，不包括web移动端调试。<br>本文调试均在chrome浏览器进行</p>
|
|
22
22
|
</blockquote>
|
|
@@ -124,7 +124,7 @@ console.profileEnd();
|
|
|
124
124
|
<h3 id="chrome中的调试技巧"><a href="#chrome中的调试技巧" class="headerlink" title="chrome中的调试技巧"></a>chrome中的调试技巧</h3><ol>
|
|
125
125
|
<li>DOM元素的控制台书签</li>
|
|
126
126
|
</ol>
|
|
127
|
-
<p>Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，那么&
|
|
127
|
+
<p>Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，那么$0 表示C元素，$1 表示B元素，$2 表示A元素。（这个和正则表达式的$符号类似，不过顺序不同）</p>
|
|
128
128
|
<ol>
|
|
129
129
|
<li>如果你想调试f函数，用debug(f)语句可以增加这种断点。</li>
|
|
130
130
|
<li>Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。</li>
|
package/article/46911.html
CHANGED
|
@@ -206,7 +206,7 @@ npm install --save-dev node-sass sass-loader
|
|
|
206
206
|
}
|
|
207
207
|
</code></pre>
|
|
208
208
|
<blockquote>
|
|
209
|
-
<h3 id="7-支持转义-ES6-
|
|
209
|
+
<h3 id="7-支持转义-ES6-ES7-JSX"><a href="#7-支持转义-ES6-ES7-JSX" class="headerlink" title="7.支持转义 ES6/ES7/JSX"></a>7.支持转义 ES6/ES7/JSX</h3></blockquote>
|
|
210
210
|
<p>ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。</p>
|
|
211
211
|
<pre><code>npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread
|
|
212
212
|
</code></pre>
|
package/article/4783.html
CHANGED
|
@@ -134,7 +134,7 @@ nava{
|
|
|
134
134
|
<p>这会给所有的包含<code><strong></code>或者<code><em></code>元素的<code>p</code>元素添加一个颜色为红色的样式。</p>
|
|
135
135
|
<p><a target="_blank" rel="noopener" href="https://codepen.io/eh3rrera/pen/QYjmYX">在 Codepen 上试试</a></p>
|
|
136
136
|
<h4 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h4><p>这类选择器包含那些应用在元素属性上的选择器。</p>
|
|
137
|
-
<h4 id="foo
|
|
137
|
+
<h4 id="foo-”bar”i"><a href="#foo-”bar”i" class="headerlink" title="[foo=”bar”i]"></a>[foo=”bar”i]</h4><p><a target="_blank" rel="noopener" href="https://caniuse.com/#feat=css-case-insensitive">浏览器支持</a></p>
|
|
138
138
|
<p>它选择那些<code>foo</code>属性的值等于<code>bar</code>的元素，忽略大小写。</p>
|
|
139
139
|
<p>例如：</p>
|
|
140
140
|
<pre><code>p[class="text" i] {
|
|
@@ -144,7 +144,7 @@ nava{
|
|
|
144
144
|
</code></pre>
|
|
145
145
|
<p>这会给所有的<code>class</code>属性的值为<code>Text</code>、<code>TEXT</code>、或者是<code>text</code>、又或者是其他组合的<code>p</code>元素添加一个颜色为绿色的样式。</p>
|
|
146
146
|
<p><a target="_blank" rel="noopener" href="https://codepen.io/eh3rrera/pen/pGjVEg">在 Codepen 上试试</a></p>
|
|
147
|
-
<h4 id="foo-
|
|
147
|
+
<h4 id="foo-bar-s"><a href="#foo-bar-s" class="headerlink" title="[foo="bar"s]"></a><code>[foo="bar"s]</code></h4><p>在我写这篇文章的时候，还没有任何一个浏览器支持这个选择器。</p>
|
|
148
148
|
<p>它选择那些<code>foo</code>属性的值严格等于<code>bar</code>的元素。</p>
|
|
149
149
|
<p>例如：</p>
|
|
150
150
|
<pre><code>p[class="text" s]{
|
|
@@ -165,7 +165,7 @@ nava{
|
|
|
165
165
|
</code></pre>
|
|
166
166
|
<p>这会给设置了从左到右方向的<code>p</code>元素添加一个背景色为红色的样式。</p>
|
|
167
167
|
<p><a target="_blank" rel="noopener" href="https://codepen.io/eh3rrera/pen/GzpdwV">在 Codepen 上试试</a></p>
|
|
168
|
-
<h4 id="lang-zh-
|
|
168
|
+
<h4 id="lang-zh-hant"><a href="#lang-zh-hant" class="headerlink" title=":lang(zh,"*-hant")"></a><code>:lang(zh,"*-hant")</code></h4><p><a target="_blank" rel="noopener" href="https://caniuse.com/#search=%3Alang">浏览器支持</a></p>
|
|
169
169
|
<p>在我写这篇文章的时候，还没有任何一个浏览器支持这个第四级选择器。</p>
|
|
170
170
|
<p>它选择那些被标记为中文的元素（或者选择其他语言标记的元素，只需要把<code>zh</code>改为其他的语言代码就可以了）或者用繁体字书写的元素（或者在其他字符的系统中，将<code>-hant</code>替换为其它字符代码）。</p>
|
|
171
171
|
<p>实际上，第二级选择器里面就有这个选择器，但是在第四级选择器里面新增了通配符和逗号分隔列表。</p>
|
package/article/48216.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
</script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
|
|
18
18
|
</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
|
|
19
19
|
</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/cainiaoblog@latest/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">Web性能领域常见的专业术语</h1><div class="post-meta"><span class="date">2019-12-16</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%88%86%E4%BA%AB/">分享 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2.5k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 8</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/48216.html#vcomment"><span class="waline-comment-count" data-path="/article/48216.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://mp.weixin.qq.com/s/GIpmZIY6yxGRBpkTDHuJuw</code></p>
|
|
20
|
-
<h2 id="衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的-“时间点”-可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的-“时间点”-可以影响用户的感觉（感觉我们的网页是-“快”-还是-“慢”）。而且不同类型的产品所侧重的点也都不太一样，可能同一个时间点，对于某些产品至关重要，但对于另外一些产品，则完全不care
|
|
20
|
+
<h2 id="衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的-“时间点”-可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的-“时间点”-可以影响用户的感觉（感觉我们的网页是-“快”-还是-“慢”）。而且不同类型的产品所侧重的点也都不太一样，可能同一个时间点，对于某些产品至关重要，但对于另外一些产品，则完全不care。-编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue-js》作者。-测量与排查网页的性能瓶颈，是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语，通过这些术语也可以侧面了解是哪些因素在影响加载性能。"><a href="#衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的-“时间点”-可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的-“时间点”-可以影响用户的感觉（感觉我们的网页是-“快”-还是-“慢”）。而且不同类型的产品所侧重的点也都不太一样，可能同一个时间点，对于某些产品至关重要，但对于另外一些产品，则完全不care。-编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue-js》作者。-测量与排查网页的性能瓶颈，是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语，通过这些术语也可以侧面了解是哪些因素在影响加载性能。" class="headerlink" title="衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的 “时间点” 可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的 “时间点” 可以影响用户的感觉（感觉我们的网页是 “快” 还是 “慢”）。而且不同类型的产品所侧重的点也都不太一样，可能同一个时间点，对于某些产品至关重要，但对于另外一些产品，则完全不care。>编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue.js》作者。>测量与排查网页的性能瓶颈，是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语，通过这些术语也可以侧面了解是哪些因素在影响加载性能。"></a>衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样，因为加载网页不是一瞬间的事，准确地说，它是一个过程，不存在某个单独的 <strong>“时间点”</strong> 可以完全体现出网页的性能，因为在网页加载的过程中，有很多个比较关键的 <strong>“时间点”</strong> 可以影响用户的感觉（感觉我们的网页是 <strong>“快”</strong> 还是 <strong>“慢”</strong>）。而且不同类型的产品所侧重的点也都不太一样，可能同一个时间点，对于某些产品至关重要，但对于另外一些产品，则完全不care。<br><span id="more"></span><br>>编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue.js》作者。<br>>测量与排查网页的性能瓶颈，是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语，通过这些术语也可以侧面了解是哪些因素在影响加载性能。</h2><p>以<a target="_blank" rel="noopener" href="https://www.google.com.hk为例,下图是使用lighthouse(一个性能测评工具)捕获出的测评结果报告./">https://www.google.com.hk为例，下图是使用Lighthouse（一个性能测评工具）捕获出的测评结果报告。</a></p>
|
|
21
21
|
<p><img src="https://mmbiz.qpic.cn/mmbiz_png/MpGQUHiaib4ib7IGiboflmhpibLq6UD9r8Y1FkrckDFlOayDdXd5lSkls1XrT04e5c6DTW2ExANczlIk1uAnr4F3hVw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="xuehuayu.cn"></p>
|
|
22
22
|
<p>下图是使用Chrome浏览器的DevTools捕获出的加载性能结果报告。</p>
|
|
23
23
|
<p><img src="https://mmbiz.qpic.cn/mmbiz_png/MpGQUHiaib4ib7IGiboflmhpibLq6UD9r8Y1FV5rTNhQRCgdtCM8hhvtQHduZW6B2iao0EI8xTswicibOblgBVlXHEQF5g/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="xuehuayu.cn"></p>
|
package/article/48252.html
CHANGED
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
<p>如果响应中未显示Expires，Cache-Control：max-age或Cache-Control：s-maxage，并且响应中不包含其他有关缓存的限制，缓存可以使用启发式方法计算新鲜度寿命。通常会根据响应头中的2个时间字段 Date 减去 Last-Modified 值的 10% 作为缓存时间。</p>
|
|
100
100
|
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Date 减去 Last-Modified 值的 10% 作为缓存时间。</span></span><br><span class="line"><span class="comment">// Date：创建报文的日期时间, Last-Modified 服务器声明文档最后被修改时间</span></span><br><span class="line"> response_is_fresh = <span class="title function_">max</span>(<span class="number">0</span>,（<span class="title class_">Date</span> - <span class="title class_">Last</span>-<span class="title class_">Modified</span>)) % <span class="number">10</span></span><br></pre></td></tr></table></figure>
|
|
101
101
|
|
|
102
|
-
<h5 id="接着回答，我说返回html之后，会解析html-这部分知识我提前准备过，但是答的不是很详细，大概意思就是cssom-domTree-
|
|
102
|
+
<h5 id="接着回答，我说返回html之后，会解析html-这部分知识我提前准备过，但是答的不是很详细，大概意思就是cssom-domTree-html-然后布局和绘制"><a href="#接着回答，我说返回html之后，会解析html-这部分知识我提前准备过，但是答的不是很详细，大概意思就是cssom-domTree-html-然后布局和绘制" class="headerlink" title="接着回答，我说返回html之后，会解析html,这部分知识我提前准备过，但是答的不是很详细，大概意思就是cssom + domTree = html,然后布局和绘制"></a>接着回答，我说返回html之后，会解析html,这部分知识我提前准备过，但是答的不是很详细，大概意思就是cssom + domTree = html,然后布局和绘制</h5><ul>
|
|
103
103
|
<li><p>构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；</p>
|
|
104
104
|
</li>
|
|
105
105
|
<li><p>构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；</p>
|
package/article/50343.html
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
<li><p><a href="#%E6%89%A9%E5%B1%95">扩展</a></p>
|
|
59
59
|
</li>
|
|
60
60
|
</ul>
|
|
61
|
-
<h2 id="
|
|
61
|
+
<h2 id="减少渲染的节点-降低渲染计算量-复杂度"><a href="#减少渲染的节点-降低渲染计算量-复杂度" class="headerlink" title="减少渲染的节点/降低渲染计算量(复杂度)"></a>减少渲染的节点/降低渲染计算量(复杂度)</h2><p>首先从计算的量上下功夫，减少节点渲染的数量或者降低渲染的计算量可以显著的提高组件渲染性能。</p>
|
|
62
62
|
<h3 id="0️⃣-不要在渲染函数都进行不必要的计算"><a href="#0️⃣-不要在渲染函数都进行不必要的计算" class="headerlink" title="0️⃣ 不要在渲染函数都进行不必要的计算"></a>0️⃣ 不要在渲染函数都进行不必要的计算</h3><p>比如不要在渲染函数(render)中进行数组排序、数据转换、订阅事件、创建事件处理器等等. <strong>渲染函数中不应该放置太多副作用</strong></p>
|
|
63
63
|
<h3 id="1️⃣-减少不必要的嵌套"><a href="#1️⃣-减少不必要的嵌套" class="headerlink" title="1️⃣ 减少不必要的嵌套"></a>1️⃣ 减少不必要的嵌套</h3><p><img src="https://user-gold-cdn.xitu.io/2019/6/15/16b58e532d863b10?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>我们团队是重度的 <code>styled-components</code> 用户，<strong>其实大部分情况下我们都不需要这个玩意</strong>，比如纯静态的样式规则，以及需要重度性能优化的场景。除了性能问题，另外一个困扰我们的是它带来的节点嵌套地狱(如上图)。</p>
|
|
64
64
|
<p>所以我们需要理性地选择一些工具，比如使用原生的 CSS，减少 React 运行时的负担.</p>
|
package/article/5204.html
CHANGED
|
@@ -166,7 +166,7 @@ console.log(obj);//{ name: 'Jack', age: 18,hobbies: [ 'reading&
|
|
|
166
166
|
<p> functiondeepClone(obj, hash=newWeakMap()) { //递归拷贝if (obj instanceofRegExp) returnnewRegExp(obj);<br> if (obj instanceofDate) returnnewDate(obj);<br> if (obj ===null||typeof obj !==’object’) {<br> //如果不是复杂数据类型，直接返回return obj;<br> }<br> if (hash.has(obj)) {<br> returnhash.get(obj);<br> }<br> /** * 如果obj是数组，那么 obj.constructor 是 [Function: Array] * 如果obj是对象，那么 obj.constructor 是 [Function: Object]*/let t =newobj.constructor();<br> hash.set(obj, t);<br> for (let key in obj) {<br> //递归if (obj.hasOwnProperty(key)) {//是否是自身的属性<br> t[key] =deepClone(obj[key], hash);<br> }<br> }<br> return t;<br> }</p>
|
|
167
167
|
</li>
|
|
168
168
|
</ol>
|
|
169
|
-
<h3 id="4-call-
|
|
169
|
+
<h3 id="4-call-apply-的实现原理是什么？"><a href="#4-call-apply-的实现原理是什么？" class="headerlink" title="4. call/apply 的实现原理是什么？"></a>4. call/apply 的实现原理是什么？</h3><p>call 和 apply 的功能相同，都是改变 <code>this</code> 的执行，并立即执行函数。区别在于传参方式不同。</p>
|
|
170
170
|
<ul>
|
|
171
171
|
<li><p><code>func.call(thisArg, arg1, arg2, ...)</code>：第一个参数是 <code>this</code> 指向的对象，其它参数依次传入。</p>
|
|
172
172
|
</li>
|
|
@@ -221,7 +221,7 @@ console.log(sum(2)(3)(5));//10console.log(sum(2, 3, 5));//10console.log(sum(2)(3
|
|
|
221
221
|
<li>提前返回 – 返回接受余下的参数且返回结果的新函数</li>
|
|
222
222
|
<li>延迟执行 – 返回新函数，等待执行</li>
|
|
223
223
|
</ul>
|
|
224
|
-
<h3 id="6-如何让-a-
|
|
224
|
+
<h3 id="6-如何让-a-1-a-2-a-3-的值为true？"><a href="#6-如何让-a-1-a-2-a-3-的值为true？" class="headerlink" title="6. 如何让 (a == 1 && a == 2 && a == 3) 的值为true？"></a>6. 如何让 (a == 1 && a == 2 && a == 3) 的值为true？</h3><blockquote>
|
|
225
225
|
<ol>
|
|
226
226
|
<li>利用隐式类型转换</li>
|
|
227
227
|
</ol>
|
package/article/52500.html
CHANGED
|
@@ -392,7 +392,7 @@ function bar() {
|
|
|
392
392
|
|
|
393
393
|
console.log(foo); // undefined
|
|
394
394
|
</code></pre>
|
|
395
|
-
<h4 id="问题-17
|
|
395
|
+
<h4 id="问题-17-能否比较模块模式与构造函数-原型模式的用法？"><a href="#问题-17-能否比较模块模式与构造函数-原型模式的用法？" class="headerlink" title="问题 17: 能否比较模块模式与构造函数/原型模式的用法？"></a>问题 17: 能否比较模块模式与构造函数/原型模式的用法？</h4><blockquote>
|
|
396
396
|
<p>主题: JavaScript<br>难度: ⭐⭐⭐⭐</p>
|
|
397
397
|
</blockquote>
|
|
398
398
|
<p>模块模式通常用于命名空间，在该模式中，使用单个实例作为存储来对相关函数和对象进行分组。这是一个不同于原型设计的用例,它们并不是相互排斥,咱们可以同时使用它们(例如，将一个构造函数放在一个模块中，并使用<code>new MyNamespace.MyModule.MyClass(arguments)</code> )。</p>
|
package/article/53428.html
CHANGED
|
@@ -114,7 +114,7 @@ const reducer = (state, action) => {
|
|
|
114
114
|
<p><img src="https://img.php.cn/upload/image/254/741/166/1574216306540170.png" alt="1574216306540170.png"></p>
|
|
115
115
|
<h2 id="4-Material-Theme"><a href="#4-Material-Theme" class="headerlink" title="4. Material Theme"></a>4. Material Theme</h2><p><a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme">Material Theme</a>是一个史诗主题，可以直接安装到VSCode中，安装后代码看起来像这样：</p>
|
|
116
116
|
<p><img src="https://img.php.cn/upload/image/622/242/464/1574218558500543.gif" alt="1574218558500543.gif"></p>
|
|
117
|
-
<h2 id="5-typescript-eslint-
|
|
117
|
+
<h2 id="5-typescript-eslint-parser"><a href="#5-typescript-eslint-parser" class="headerlink" title="5. @typescript-eslint/parser"></a>5. @typescript-eslint/parser</h2><p>如果你是一个TypeScript用户，应该开始考虑将你的 TSLint 配置转移到<code>ESLint + TypeScript</code>上，<a target="_blank" rel="noopener" href="https://github.com/typescript-eslint/typescript-eslint#what-about-tslint">TSLint 背后的支持者已经宣布计划在今年的某个时候弃用 TSLint</a>。</p>
|
|
118
118
|
<p>项目正逐步采用<code>@typescript-eslint/parser</code>和相关包，以确保其项目的前瞻性设置。</p>
|
|
119
119
|
<p>咱们仍然能够利用大部分ESLint的规则和兼容性与更漂亮使用新的设置。</p>
|
|
120
120
|
<h2 id="6-Stylelint"><a href="#6-Stylelint" class="headerlink" title="6. Stylelint"></a>6. Stylelint</h2><p>对我来说，出于以下几个原因，<a target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint">stylelint</a> 在我所有的项目中都是必须的：</p>
|
package/article/53962.html
CHANGED
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
<li>render()</li>
|
|
68
68
|
<li>componentDidMount()</li>
|
|
69
69
|
</ol>
|
|
70
|
-
<p>注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同时存在，React会在控制台给出警告信息，且仅执行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【<a href="mailto:R&#
|
|
70
|
+
<p>注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同时存在，React会在控制台给出警告信息，且仅执行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【<a href="mailto:React@16.7.0">React@16.7.0</a>】</p>
|
|
71
71
|
<blockquote>
|
|
72
72
|
<p>运行时:</p>
|
|
73
73
|
</blockquote>
|
package/article/54258.html
CHANGED
|
@@ -65,7 +65,7 @@ var y = [1, 2, 3, 4, 5];
|
|
|
65
65
|
}
|
|
66
66
|
</code></pre>
|
|
67
67
|
<h4 id="问题10：是否可以将匿名函数分配给变量并将其作为参数传递给另一个函数"><a href="#问题10：是否可以将匿名函数分配给变量并将其作为参数传递给另一个函数" class="headerlink" title="问题10：是否可以将匿名函数分配给变量并将其作为参数传递给另一个函数"></a>问题10：是否可以将匿名函数分配给变量并将其作为参数传递给另一个函数</h4><p>可以。一个匿名函数可以分配给一个变量，它也可以作为参数传递给另一个函数。</p>
|
|
68
|
-
<h4 id="问题11：JS
|
|
68
|
+
<h4 id="问题11：JS中的参数对象是什么-如何获得传递给函数的参数类型"><a href="#问题11：JS中的参数对象是什么-如何获得传递给函数的参数类型" class="headerlink" title="问题11：JS中的参数对象是什么&如何获得传递给函数的参数类型"></a>问题11：JS中的参数对象是什么&如何获得传递给函数的参数类型</h4><p>JS 变量<code>arguments</code>表示传递给函数的参数。 使用<code>typeof</code>运算符，可以获得传递给函数的参数类型。如下：</p>
|
|
69
69
|
<pre><code>function func(x){
|
|
70
70
|
console.log(typeof x, arguments.length);
|
|
71
71
|
}
|
|
@@ -153,7 +153,7 @@ alert('恭喜你中了一百万')/*弹出框*/
|
|
|
153
153
|
<li>静态:在这种情况下，变量只能包含一种类型，就像在Java中声明为<code>string</code>的变量只能包含一组字符，不能包含其他类型。</li>
|
|
154
154
|
</ul>
|
|
155
155
|
<h4 id="问题27：Cookie-与-Local-storage-与-Session-storage-区别"><a href="#问题27：Cookie-与-Local-storage-与-Session-storage-区别" class="headerlink" title="问题27：Cookie 与 Local storage 与 Session storage 区别"></a>问题27：Cookie 与 Local storage 与 Session storage 区别</h4><p>特性CookielocalStoragesessionStorage数据的生命期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除存放数据大小4K左右一般为 5MB与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信易用性需要程序员自己封装，源生的Cookie接口不友好需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持</p>
|
|
156
|
-
<h4 id="问题28
|
|
156
|
+
<h4 id="问题28-‘-‘-和-‘-‘-区别"><a href="#问题28-‘-‘-和-‘-‘-区别" class="headerlink" title="问题28: ‘==‘ 和 ‘===‘ 区别"></a>问题28: ‘==‘ 和 ‘===‘ 区别</h4><p>**<code>==</code>**： 两边值类型不同的时候，要先进行类型转换，再比较。<br>**<code>===</code>**：不做类型转换，类型不同的一定不等。</p>
|
|
157
157
|
<p>一言以蔽之：<code>==</code>先转换类型再比较，<code>===</code>先判断类型，如果不是同一类型直接为<code>false</code>。</p>
|
|
158
158
|
<h4 id="问题29：null-和-undefined-区别"><a href="#问题29：null-和-undefined-区别" class="headerlink" title="问题29：null 和 undefined 区别"></a>问题29：null 和 undefined 区别</h4><p><code>undefined</code>是基本数据类型 表示未定义 缺少的意思。</p>
|
|
159
159
|
<p><code>null</code>是引用数据类型，是对象，表示空对象</p>
|
|
@@ -174,7 +174,7 @@ alert('恭喜你中了一百万')/*弹出框*/
|
|
|
174
174
|
<h4 id="问题-35：NaN-是什么"><a href="#问题-35：NaN-是什么" class="headerlink" title="问题 35：NaN 是什么"></a>问题 35：NaN 是什么</h4><p><code>NaN</code> 即非数值（Not a Number），<code>NaN</code> 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。</p>
|
|
175
175
|
<p><code>NaN</code> 属性 与 <code>Number.Nan</code> 属性相同。</p>
|
|
176
176
|
<p><strong>提示：</strong> 请使用 <code>isNaN()</code> 来判断一个值是否是数字。原因是 <code>NaN</code> 与所有值都不相等，包括它自己。</p>
|
|
177
|
-
<h4 id="问题-36：JS
|
|
177
|
+
<h4 id="问题-36：JS的原始-对象类型如何在函数中传递？"><a href="#问题-36：JS的原始-对象类型如何在函数中传递？" class="headerlink" title="问题 36：JS的原始/对象类型如何在函数中传递？"></a>问题 36：JS的原始/对象类型如何在函数中传递？</h4><p>两者之间的一个区别是，原始数据类型是通过值传递的，对象是通过引用传递的。</p>
|
|
178
178
|
<ul>
|
|
179
179
|
<li><strong>值传递</strong>：意味着创建原始文件的副本。把它想象成一对双胞胎:他们出生的时候一模一样，但是双胞胎中的老大在战争中失去了一条腿，而老二却没有。</li>
|
|
180
180
|
<li><strong>引用传递</strong>: 意味着创建原始文件的别名。当我妈妈叫沙雕的时候，虽然我的名字叫小智，但这并不是说我就突然就克隆了一个自己:我仍然是我，只是可以用不同名字来称呼我而已。</li>
|
package/article/54313.html
CHANGED
|
@@ -128,7 +128,7 @@ console.log(someObj["d"]); // undefined
|
|
|
128
128
|
<pre><code> console.log(null == undefined); // true
|
|
129
129
|
console.log(null === undefined); // false
|
|
130
130
|
</code></pre>
|
|
131
|
-
<h3 id="2
|
|
131
|
+
<h3 id="2-运算符能做什么-2-运算符能做什么"><a href="#2-运算符能做什么-2-运算符能做什么" class="headerlink" title="[2. && 运算符能做什么](2. && 运算符能做什么)"></a>[2. && 运算符能做什么](2. && 运算符能做什么)</h3><p><code>&&</code> 也可以叫<strong>逻辑与</strong>，在其操作数中找到第一个虚值表达式并返回它，如果没有找到任何虚值表达式，则返回最后一个真值表达式。它采用短路来防止不必要的工作。</p>
|
|
132
132
|
<pre><code>console.log(false && 1 && []); // false
|
|
133
133
|
console.log(" " && true && 5); // 5
|
|
134
134
|
</code></pre>
|
|
@@ -346,7 +346,7 @@ border:1px solid red;border-radius:3px;">
|
|
|
346
346
|
}
|
|
347
347
|
</code></pre>
|
|
348
348
|
<p>如果单击 <code>button</code>，即使我们单击该 <code>button</code>，它也会打印最外面的<code>div</code>标签。 在此示例中，我们可以得出结论，<code>event.currentTarget</code>是附加事件处理程序的元素。</p>
|
|
349
|
-
<h3 id="14
|
|
349
|
+
<h3 id="14-和-有什么区别？-14-和-有什么区别？"><a href="#14-和-有什么区别？-14-和-有什么区别？" class="headerlink" title="[14. == 和 === 有什么区别？](14. == 和 === 有什么区别？)"></a>[14. == 和 === 有什么区别？](14. == 和 === 有什么区别？)</h3><p><code>==</code>用于一般比较，<code>===</code>用于严格比较，<code>==</code>在比较的时候可以转换数据类型<code>，===</code>严格比较，只要类型不匹配就返回<code>flase</code>。</p>
|
|
350
350
|
<p>先来看看 <code>==</code> 这兄弟：</p>
|
|
351
351
|
<p>强制是将值转换为另一种类型的过程。 在这种情况下，<code>==</code>会执行隐式强制。 在比较两个值之前，<code>==</code>需要执行一些规则。</p>
|
|
352
352
|
<p>假设我们要比较<code>x == y</code>的值。</p>
|
package/article/55756.html
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<p>不幸的是， <code>CLIEngine</code> 已经成为许多新特性的主要阻碍。最重要的是，因为<code>CLIEngine</code> 类是同步工作的，所以在 <code>ESLint</code> 的核心中不可能执行任何类型的异步操作。这一限制意味着诸如文件的并行连接和加载 <code>ECMAScript</code> 模块(ESM)文件等功能无法实现。</p>
|
|
25
25
|
<p>在我们决定用新的 <code>ESLint</code> 类替换 <code>CLIEngine</code> 类之前，考虑了几种方法。<code>ESLint</code> 类将包含异步方法，作为将异步功能引入核心的起点。最开始， <code>ESLint</code> 类只是对 <code>CLIEngine</code> 的一个封装，随着时间的推移，我们将系统地开始在 <code>ESLint</code> 类中编写新功能。最终， <code>ESLint</code> 和 <code>CLIEngine</code> 类将完全独立。</p>
|
|
26
26
|
<p>在 <code>v7.0.0</code>，<code>CLIEngine</code>类将被弃用，但不会删除。我们会在将来的主要版本中将 <code>CLIEngine</code> 删除（不用担心，在这样做之前，我们会给您很多提示）。</p>
|
|
27
|
-
<h2 id="弃用-Node-js-
|
|
27
|
+
<h2 id="弃用-Node-js-CommonJS-特定的规则"><a href="#弃用-Node-js-CommonJS-特定的规则" class="headerlink" title="弃用 Node.js / CommonJS 特定的规则"></a>弃用 Node.js / CommonJS 特定的规则</h2><p>因此，以下规则将在 <code>core</code> 中被弃用：</p>
|
|
28
28
|
<p>在 <code>core</code> 中管理规则是正在进行的 <code>ESLint</code> 维护的重要组成部分。随着项目的发展，我们维护的规则数量也在增加。我们检查了所有当前规则，并确定特定于 <code>Node.js / CommonJS</code> 的规则没有必要包含在未来的 <code>core</code> 中。特别是 <code>Node.js</code> 更倾向于 <code>ESM</code> 作为首选模块系统时。</p>
|
|
29
29
|
<ul>
|
|
30
30
|
<li>callback-return</li>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<h2 id="指令注释中的描述"><a href="#指令注释中的描述" class="headerlink" title="指令注释中的描述"></a>指令注释中的描述</h2><p>指令注释描述允许你给自己和其他开发人员留下关于为什么要包含注释的说明。例如:</p>
|
|
43
43
|
<pre><code>/* eslint-disable no-new -- this class has a side-effect in the constructor. */
|
|
44
44
|
</code></pre>
|
|
45
|
-
<h2 id="对-
|
|
45
|
+
<h2 id="对-eslintrc-配置文件的使用警告"><a href="#对-eslintrc-配置文件的使用警告" class="headerlink" title="对 ~/.eslintrc 配置文件的使用警告"></a>对 ~/.eslintrc 配置文件的使用警告</h2><p><code>v6.7.0</code> 中已弃用主目录中的配置文件，并且在 <code>v7.0.0</code> 中使用时会发出警告。长期以来，此功能一直使 <code>ESLint</code> 用户感到困惑，尤其是因为如果找不到其他配置文件， <code>ESLint</code> 只会在主目录中查找配置文件。自引入主目录配置文件以来， <code>ESLint</code> 中的配置系统已发生了很大变化，并且由于具有额外的灵活性，我们认为还有许多比主目录配置文件更清晰的其他配置 <code>ESLint</code> 的选项。</p>
|
|
46
46
|
<p><code>v8.0.0</code> 中将删除对主目录配置文件的支持。</p>
|
|
47
47
|
<h2 id="使用–config或时更新基本路径–ignore-path"><a href="#使用–config或时更新基本路径–ignore-path" class="headerlink" title="使用–config或时更新基本路径–ignore-path"></a>使用–config或时更新基本路径–ignore-path</h2><p>在 <code>v7.0.0</code> 之前的版本中，<code>ESLint</code> 将解析配置文件中的引用，或者忽略相对于传递给 <code>--config</code> 或 <code>-—ignore-path</code> 的文件位置相关的文件。这没有多大意义，并且会给用户带来混乱和意外行为。在 <code>v7.0.0</code> 中，配置文件和忽略使用 <code>--config</code> 或 <code>--ignore-path</code> 传递的文件使用当前工作目录作为它们的基本路径。</p>
|
|
48
48
|
<h2 id="从配置文件目录加载的插件"><a href="#从配置文件目录加载的插件" class="headerlink" title="从配置文件目录加载的插件"></a>从配置文件目录加载的插件</h2><p>在<code>v7.0.0</code>中，将相对于引用插件的配置加载插件。</p>
|
package/article/56816.html
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<p>如果设置<code>rootMargin</code>为”<code>20px 0px 30px 30px</code>“，那么元素未到达<code>视窗</code>时，就已经切换为<code>可见</code>状态了：</p>
|
|
35
35
|
<p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd6260edf6ebe5?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"></p>
|
|
36
36
|
<h4 id="4-常用方法"><a href="#4-常用方法" class="headerlink" title="4. 常用方法"></a>4. 常用方法</h4><p>名称说明参数observe开始监听一个目标元素节点unobserve停止监听一个目标元素节点takeRecords返回所有监听的目标元素集合disconnect停止所有监听</p>
|
|
37
|
-
<h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><h4 id="1-假设页面上有一个class-
|
|
37
|
+
<h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><h4 id="1-假设页面上有一个class-box-的盒子且父元素为视窗："><a href="#1-假设页面上有一个class-box-的盒子且父元素为视窗：" class="headerlink" title="1. 假设页面上有一个class="box"的盒子且父元素为视窗："></a>1. 假设页面上有一个<code>class="box"</code>的盒子且父元素为<code>视窗</code>：</h4><pre><code>let box = document.querySelector(".box");
|
|
38
38
|
|
|
39
39
|
let observer = new IntersectionObserver(entries => {
|
|
40
40
|
entries.forEach(item => {
|
|
@@ -47,7 +47,7 @@ observer.observe(box); // 监听一个box
|
|
|
47
47
|
</code></pre>
|
|
48
48
|
<p>效果如下：</p>
|
|
49
49
|
<p><img src="https://user-gold-cdn.xitu.io/2019/8/28/16cd5ed1eb7a2546?imageslim" alt="xuehuayu.cn"></p>
|
|
50
|
-
<h4 id="2-假设页面上有多个class-
|
|
50
|
+
<h4 id="2-假设页面上有多个class-box-的盒子且父元素为视窗："><a href="#2-假设页面上有多个class-box-的盒子且父元素为视窗：" class="headerlink" title="2. 假设页面上有多个class="box"的盒子且父元素为视窗："></a>2. 假设页面上有多个<code>class="box"</code>的盒子且父元素为<code>视窗</code>：</h4><pre><code>let box = document.querySelectorAll(".box");
|
|
51
51
|
|
|
52
52
|
let observer = new IntersectionObserver(entries => console.log(`发生交叉行为，目标元素有${entries.length}个`));
|
|
53
53
|
|