cainiaoblog 23.2.344 → 23.2.345
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/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 +463 -463
- package/package.json +1 -1
- package/page/14/index.html +1 -1
- package/search.xml +43 -43
- package/sitemap.xml +377 -377
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:&#
|
|
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
|
|
package/article/57965.html
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
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">React SSR 详解 + 2个项目实战</h1><div class="post-meta"><span class="date">2019-12-13</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"> 5.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"> 23</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/57965.html#vcomment"><span class="waline-comment-count" data-path="/article/57965.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://juejin.im/post/5def0816f265da33aa6aa7fe</code></p>
|
|
20
20
|
<span id="more"></span>
|
|
21
|
-
<h2 id="CSR-
|
|
21
|
+
<h2 id="CSR-SSR"><a href="#CSR-SSR" class="headerlink" title="CSR & SSR"></a>CSR & SSR</h2><h3 id="客户端渲染（Client-Side-Rendering）"><a href="#客户端渲染（Client-Side-Rendering）" class="headerlink" title="客户端渲染（Client Side Rendering）"></a>客户端渲染（Client Side Rendering）</h3><ul>
|
|
22
22
|
<li><strong>CSR 渲染流程：</strong><img src="https://user-gold-cdn.xitu.io/2019/12/9/16eeb56642155f21?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="React CSR.png"></li>
|
|
23
23
|
</ul>
|
|
24
24
|
<h3 id="服务端渲染（Server-Side-Rendering）"><a href="#服务端渲染（Server-Side-Rendering）" class="headerlink" title="服务端渲染（Server Side Rendering）"></a>服务端渲染（Server Side Rendering）</h3><ul>
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
<p> 复制代码</p>
|
|
208
208
|
</li>
|
|
209
209
|
</ul>
|
|
210
|
-
<h3 id="
|
|
210
|
+
<h3 id="动态加载资源-组件"><a href="#动态加载资源-组件" class="headerlink" title="动态加载资源 & 组件"></a>动态加载资源 & 组件</h3><pre><code>import { withRouter } from'next/router'import dynamic from'next/dynamic'import Link from'next/link'const LazyComp = dynamic(import('../components/lazy-comp'));
|
|
211
211
|
|
|
212
212
|
const A = ({time }) => {
|
|
213
213
|
|
|
@@ -322,7 +322,7 @@ export default A;
|
|
|
322
322
|
<li><strong>在使用 Next.js 时，</strong> 打开浏览器控制台 => 找到 network => 找到当前路由的请求并查看 response => 可以看到服务端返回的 html 里包含着当前页面需要的数据，这样客户端就不会重新发起请求了，靠的就是 <code>ReactDOM.hydrate</code> 。</li>
|
|
323
323
|
</ul>
|
|
324
324
|
<p><img src="https://user-gold-cdn.xitu.io/2019/12/10/16eeb6772793457d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="image.png"></p>
|
|
325
|
-
<h3 id="SSR-需要使用-StaticRouter（静态路由容器），而非-BrowserRouter-和-HashRouter"><a href="#SSR-需要使用-StaticRouter（静态路由容器），而非-BrowserRouter-和-HashRouter" class="headerlink" title="SSR 需要使用 StaticRouter（静态路由容器），而非 BrowserRouter 和 HashRouter"></a>SSR 需要使用 <code>StaticRouter</code>（静态路由容器），而非 <code>BrowserRouter</code> 和 <code>HashRouter</code></h3><h3 id="客户端和服务端都需要配置-store-仓库，但是两个仓库会不大一样"><a href="#客户端和服务端都需要配置-store-仓库，但是两个仓库会不大一样" class="headerlink" title="客户端和服务端都需要配置 store 仓库，但是两个仓库会不大一样"></a>客户端和服务端都需要配置 store 仓库，但是两个仓库会不大一样</h3><h3 id="componentDidMount-在服务器端是不执行的，而-componentWillMount-在客户端和服务端都会执行，所以这就是为什么不建议在-componentWillMount-发送请求的原因"><a href="#componentDidMount-在服务器端是不执行的，而-componentWillMount-在客户端和服务端都会执行，所以这就是为什么不建议在-componentWillMount-发送请求的原因" class="headerlink" title="componentDidMount 在服务器端是不执行的，而 componentWillMount 在客户端和服务端都会执行，所以这就是为什么不建议在 componentWillMount 发送请求的原因"></a><code>componentDidMount</code> 在服务器端是不执行的，而 <code>componentWillMount</code> 在客户端和服务端都会执行，所以这就是为什么不建议在 <code>componentWillMount</code> 发送请求的原因</h3><h3 id="注册事件必须要放在-componentDidMount-中，不能放在-componentWillMount-中，因为-服务端是不会执行-componentWillUnmount-的，如果放在-componentWillMount-中，会导致事件重复注册，发生内存泄漏"><a href="#注册事件必须要放在-componentDidMount-中，不能放在-componentWillMount-中，因为-服务端是不会执行-componentWillUnmount-的，如果放在-componentWillMount-中，会导致事件重复注册，发生内存泄漏" class="headerlink" title="注册事件必须要放在 componentDidMount 中，不能放在 componentWillMount 中，因为 服务端是不会执行 componentWillUnmount 的，如果放在 componentWillMount 中，会导致事件重复注册，发生内存泄漏"></a>注册事件必须要放在 <code>componentDidMount</code> 中，不能放在 <code>componentWillMount</code> 中，因为 服务端是不会执行 <code>componentWillUnmount</code> 的，如果放在 <code>componentWillMount</code> 中，会导致事件重复注册，发生内存泄漏</h3><h3 id="如果不想使用-SSR，但是又想要优化-SEO-，可以使用-prerender-或者-prerender-spa-plugin-来替代-SSR"><a href="#如果不想使用-SSR，但是又想要优化-SEO-，可以使用-prerender-或者-prerender-spa-plugin-来替代-SSR" class="headerlink" title="如果不想使用 SSR，但是又想要优化 SEO ，可以使用 prerender 或者 prerender-spa-plugin 来替代 SSR"></a>如果不想使用 SSR，但是又想要优化 SEO ，可以使用 <a target="_blank" rel="noopener" href="https://github.com/prerender/prerender">prerender </a> 或者 <a target="_blank" rel="noopener" href="https://github.com/chrisvfritz/prerender-spa-plugin">prerender-spa-plugin</a> 来替代 SSR</h3><h3 id="在手动搭建-SSR-框架时：使用-npm-run-all-
|
|
325
|
+
<h3 id="SSR-需要使用-StaticRouter（静态路由容器），而非-BrowserRouter-和-HashRouter"><a href="#SSR-需要使用-StaticRouter（静态路由容器），而非-BrowserRouter-和-HashRouter" class="headerlink" title="SSR 需要使用 StaticRouter（静态路由容器），而非 BrowserRouter 和 HashRouter"></a>SSR 需要使用 <code>StaticRouter</code>（静态路由容器），而非 <code>BrowserRouter</code> 和 <code>HashRouter</code></h3><h3 id="客户端和服务端都需要配置-store-仓库，但是两个仓库会不大一样"><a href="#客户端和服务端都需要配置-store-仓库，但是两个仓库会不大一样" class="headerlink" title="客户端和服务端都需要配置 store 仓库，但是两个仓库会不大一样"></a>客户端和服务端都需要配置 store 仓库，但是两个仓库会不大一样</h3><h3 id="componentDidMount-在服务器端是不执行的，而-componentWillMount-在客户端和服务端都会执行，所以这就是为什么不建议在-componentWillMount-发送请求的原因"><a href="#componentDidMount-在服务器端是不执行的，而-componentWillMount-在客户端和服务端都会执行，所以这就是为什么不建议在-componentWillMount-发送请求的原因" class="headerlink" title="componentDidMount 在服务器端是不执行的，而 componentWillMount 在客户端和服务端都会执行，所以这就是为什么不建议在 componentWillMount 发送请求的原因"></a><code>componentDidMount</code> 在服务器端是不执行的，而 <code>componentWillMount</code> 在客户端和服务端都会执行，所以这就是为什么不建议在 <code>componentWillMount</code> 发送请求的原因</h3><h3 id="注册事件必须要放在-componentDidMount-中，不能放在-componentWillMount-中，因为-服务端是不会执行-componentWillUnmount-的，如果放在-componentWillMount-中，会导致事件重复注册，发生内存泄漏"><a href="#注册事件必须要放在-componentDidMount-中，不能放在-componentWillMount-中，因为-服务端是不会执行-componentWillUnmount-的，如果放在-componentWillMount-中，会导致事件重复注册，发生内存泄漏" class="headerlink" title="注册事件必须要放在 componentDidMount 中，不能放在 componentWillMount 中，因为 服务端是不会执行 componentWillUnmount 的，如果放在 componentWillMount 中，会导致事件重复注册，发生内存泄漏"></a>注册事件必须要放在 <code>componentDidMount</code> 中，不能放在 <code>componentWillMount</code> 中，因为 服务端是不会执行 <code>componentWillUnmount</code> 的，如果放在 <code>componentWillMount</code> 中，会导致事件重复注册，发生内存泄漏</h3><h3 id="如果不想使用-SSR，但是又想要优化-SEO-，可以使用-prerender-或者-prerender-spa-plugin-来替代-SSR"><a href="#如果不想使用-SSR，但是又想要优化-SEO-，可以使用-prerender-或者-prerender-spa-plugin-来替代-SSR" class="headerlink" title="如果不想使用 SSR，但是又想要优化 SEO ，可以使用 prerender 或者 prerender-spa-plugin 来替代 SSR"></a>如果不想使用 SSR，但是又想要优化 SEO ，可以使用 <a target="_blank" rel="noopener" href="https://github.com/prerender/prerender">prerender </a> 或者 <a target="_blank" rel="noopener" href="https://github.com/chrisvfritz/prerender-spa-plugin">prerender-spa-plugin</a> 来替代 SSR</h3><h3 id="在手动搭建-SSR-框架时：使用-npm-run-all-nodemon-来提高开发-Node-项目的效率"><a href="#在手动搭建-SSR-框架时：使用-npm-run-all-nodemon-来提高开发-Node-项目的效率" class="headerlink" title="在手动搭建 SSR 框架时：使用 npm-run-all & nodemon 来提高开发 Node 项目的效率"></a>在手动搭建 SSR 框架时：使用 <code>npm-run-al</code>l & <code>nodemon</code> 来提高开发 Node 项目的效率</h3><ul>
|
|
326
326
|
<li><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/nodemon"><strong>nodemon</strong></a> 监听代码文件的变动，当代码改变之后，自动重启</p>
|
|
327
327
|
</li>
|
|
328
328
|
<li><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/npm-run-all"><strong>npm-run-all</strong></a> 用于并行或者顺序运行多个 npm 脚本的 cli 工具</p>
|
|
@@ -331,7 +331,7 @@ export default A;
|
|
|
331
331
|
<p> 复制代码</p>
|
|
332
332
|
</li>
|
|
333
333
|
</ul>
|
|
334
|
-
<h3 id="在-Next-js-中：默认会引入-import-React-from-
|
|
334
|
+
<h3 id="在-Next-js-中：默认会引入-import-React-from-react-，但是如果不引入，在写组件时，编辑器会发出警告，所以还是引入下较好"><a href="#在-Next-js-中：默认会引入-import-React-from-react-，但是如果不引入，在写组件时，编辑器会发出警告，所以还是引入下较好" class="headerlink" title="在 Next.js 中：默认会引入 import React from "react"，但是如果不引入，在写组件时，编辑器会发出警告，所以还是引入下较好"></a>在 Next.js 中：默认会引入 <code>import React from "react"</code>，但是如果不引入，在写组件时，编辑器会发出警告，所以还是引入下较好</h3><h3 id="在-Next-js-中：会对-pages-目录下的每个路由组件分开打包，所以当点击按钮进行路由跳转时，并不会马上跳转到对应的路由页面，而是要先加载好目标路由的资源文件，然后再跳转过去。这个可以用预加载优化。"><a href="#在-Next-js-中：会对-pages-目录下的每个路由组件分开打包，所以当点击按钮进行路由跳转时，并不会马上跳转到对应的路由页面，而是要先加载好目标路由的资源文件，然后再跳转过去。这个可以用预加载优化。" class="headerlink" title="在 Next.js 中：会对 pages 目录下的每个路由组件分开打包，所以当点击按钮进行路由跳转时，并不会马上跳转到对应的路由页面，而是要先加载好目标路由的资源文件，然后再跳转过去。这个可以用预加载优化。"></a>在 Next.js 中：会对 pages 目录下的每个路由组件分开打包，所以当点击按钮进行路由跳转时，并不会马上跳转到对应的路由页面，而是要先加载好目标路由的资源文件，然后再跳转过去。这个可以用预加载优化。</h3><h3 id="在-Next-js-中：内部集成了-Webpack，生成环境下默认会分割代码和-tree-shaking"><a href="#在-Next-js-中：内部集成了-Webpack，生成环境下默认会分割代码和-tree-shaking" class="headerlink" title="在 Next.js 中：内部集成了 Webpack，生成环境下默认会分割代码和 tree-shaking"></a>在 Next.js 中：内部集成了 Webpack，生成环境下默认会分割代码和 tree-shaking</h3><h3 id="Next-js-适用于任何-node-框架，但是这些框架的对于-request、response-的封装方式肯定有不同之处，它是如何保证-Next-js-导出的-handle-方法能兼容这些框架尼？"><a href="#Next-js-适用于任何-node-框架，但是这些框架的对于-request、response-的封装方式肯定有不同之处，它是如何保证-Next-js-导出的-handle-方法能兼容这些框架尼？" class="headerlink" title="Next.js 适用于任何 node 框架，但是这些框架的对于 request、response 的封装方式肯定有不同之处，它是如何保证 Next.js 导出的 handle 方法能兼容这些框架尼？"></a>Next.js 适用于任何 node 框架，但是这些框架的对于 <code>request</code>、<code>response</code> 的封装方式肯定有不同之处，它是如何保证 Next.js 导出的 <code>handle</code> 方法能兼容这些框架尼？</h3><ul>
|
|
335
335
|
<li>保证 <code>handle</code> 方法接收到的是 NodeJS 原生的<code>requset</code> 对象以及 <code>response</code> 对象，不是框架基于原生封装的 <code>request</code>、<code>response</code> 对象。所以这就是为什么在使用 koa 时，<code>handle</code> 接收的是 <code>ctx.req</code> 、<code>ctx.res</code> ，而不是 <code>ctx.request</code>、<code>ctx.response</code> 的原因。</li>
|
|
336
336
|
</ul>
|
|
337
337
|
<h3 id="在-Next-js-中：如何集成-styled-components"><a href="#在-Next-js-中：如何集成-styled-components" class="headerlink" title="在 Next.js 中：如何集成 styled-components"></a>在 Next.js 中：如何集成 styled-components</h3><ul>
|
|
@@ -394,7 +394,7 @@ render() {
|
|
|
394
394
|
<p> 复制代码</p>
|
|
395
395
|
</li>
|
|
396
396
|
</ul>
|
|
397
|
-
<h3 id="在-Next-js-中：如何集成-CSS-
|
|
397
|
+
<h3 id="在-Next-js-中：如何集成-CSS-Sass-Less-Stylus"><a href="#在-Next-js-中：如何集成-CSS-Sass-Less-Stylus" class="headerlink" title="在 Next.js 中：如何集成 CSS / Sass / Less / Stylus"></a>在 Next.js 中：如何集成 CSS / Sass / Less / Stylus</h3><p>支持用 <code>.css</code>、 <code>.scss</code>、 <code>.less</code>、 <code>.styl</code>，需要配置默认文件 next.config.js，具体可查看下面链接</p>
|
|
398
398
|
<ul>
|
|
399
399
|
<li><a target="_blank" rel="noopener" href="https://github.com/zeit/next.js/tree/canary/examples/basic-css">@zeit/next-css</a></li>
|
|
400
400
|
<li><a target="_blank" rel="noopener" href="https://github.com/zeit/next-plugins/tree/master/packages/next-sass">@zeit/next-sass</a></li>
|
package/article/59402.html
CHANGED
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
<h4 id="Compiler对象"><a href="#Compiler对象" class="headerlink" title="Compiler对象"></a>Compiler对象</h4><p>compiler 对象是 webpack 的编译器对象，compiler 对象会在启动 webpack 的时候被一次性地初始化，compiler 对象中包含了所有 webpack 可自定义操作的配置，例如 loader 的配置，plugin 的配置，entry 的配置等各种原始 webpack 配置等<br><img src="https://user-gold-cdn.xitu.io/2019/12/17/16f12c65ef49ce59?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="GitHub"><br>webpack部分源码：<a target="_blank" rel="noopener" href="https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js#L30">github.com/webpack/web…</a></p>
|
|
104
104
|
<h4 id="Compilation-对象"><a href="#Compilation-对象" class="headerlink" title="Compilation 对象"></a>Compilation 对象</h4><p>compilation 实例继承于 compiler，compilation 对象代表了一次单一的版本 webpack 构建和生成编译资源的过程。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，一次新的编译将被创建，从而生成一组新的编译资源以及新的 compilation 对象。一个 compilation 对象包含了 当前的模块资源、编译生成资源、变化的文件、以及 被跟踪依赖的状态信息。编译对象也提供了很多关键点回调供插件做自定义处理时选择使用。</p>
|
|
105
105
|
<p>Compiler 和 Compilation 的区别在于： Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只代表一次新的编译。</p>
|
|
106
|
-
<h4 id="Tapable-
|
|
106
|
+
<h4 id="Tapable-Tapable-实例"><a href="#Tapable-Tapable-实例" class="headerlink" title="Tapable & Tapable 实例"></a>Tapable & Tapable 实例</h4><p>webpack 的插件架构主要基于 Tapable 实现的，Tapable 是 webpack 项目组的一个内部库，主要是抽象了一套插件机制。它类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和操作。 除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。</p>
|
|
107
107
|
<p><img src="https://user-gold-cdn.xitu.io/2019/12/17/16f12c65e694bac6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="GitHub"><br>webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例，Tapable 能够让我们为 javaScript 模块添加并应用插件。 它可以被其它模块继承或混合。</p>
|
|
108
108
|
<h4 id="一些钩子的含义："><a href="#一些钩子的含义：" class="headerlink" title="一些钩子的含义："></a>一些钩子的含义：</h4><ul>
|
|
109
109
|
<li>SyncBailHook:只要监听函数中有一个函数的返回值不为 null，则跳过剩下所有的逻辑。</li>
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
}
|
|
134
134
|
复制代码
|
|
135
135
|
</code></pre>
|
|
136
|
-
<h3 id="Loader-
|
|
136
|
+
<h3 id="Loader-Plugin-开发调试"><a href="#Loader-Plugin-开发调试" class="headerlink" title="Loader & Plugin 开发调试"></a>Loader & Plugin 开发调试</h3><h4 id="npm-link"><a href="#npm-link" class="headerlink" title="npm link"></a>npm link</h4><ol>
|
|
137
137
|
<li><p>确保正在开发的本地 Loader 模块的 package.json 已经配置好(最主要的main字段的入口文件指向要正确)</p>
|
|
138
138
|
</li>
|
|
139
139
|
<li><p>在本地的 Npm 模块根目录下执行 npm link，将本地模块注册到全局</p>
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
<p><img src="https://user-gold-cdn.xitu.io/2019/12/17/16f12c65e7cb2645?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="GitHub"><br>Npm link 专门用于开发和调试本地的 Npm 模块，能做到在不发布模块的情况下， 将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下，让项目可以直接使 用本地的 Npm 模块。由于是通过软链接的方式实现的，编辑了本地的 Npm 模块的代码，所以在项目中也能使用到编辑后的代码。</p>
|
|
145
145
|
<p>Plugin 部分也出过完整文章，可以看这里：<a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649825806&idx=1&sn=e46dbd274e240c4dcc4b778d8b30c67d&chksm=f175e8cdc60261db3c0caa44fd58e8d759526e5bb5b6e2caebba957a5996931cc68c18e69d37&scene=21#wechat_redirect">webpack 插件机制分析及开发调试</a></p>
|
|
146
146
|
<h4 id="Resolveloader"><a href="#Resolveloader" class="headerlink" title="Resolveloader"></a>Resolveloader</h4><p>ResolveLoader 用于配置 Webpack 如何寻找 Loader ，它在默认情况下只会去 node_modules 目录下寻找。为了让 Webpack 加载放在本地项目中的 Loader,需要修改 resolveLoader.modules。<br><img src="https://user-gold-cdn.xitu.io/2019/12/17/16f12c65e51dca28?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="GitHub"></p>
|
|
147
|
-
<h3 id="HMR
|
|
147
|
+
<h3 id="HMR-性能优化"><a href="#HMR-性能优化" class="headerlink" title="HMR&性能优化"></a>HMR&性能优化</h3><p>关于HMR的在这：<a target="_blank" rel="noopener" href="https://juejin.im/post/5d4d3e5ce51d4561f64a07d1">webpack中的HMR(热更新)原理剖析</a></p>
|
|
148
148
|
<p>关于性能优化的在这：<a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649825759&idx=1&sn=726279d3dfc2ea0b6ba34788517753ad&chksm=f175eb1cc602620a66821baedcb2663e393f7ae4857e8daf6d57e4c436f9a7297a555d0e4750&scene=21#wechat_redirect">Webpack性能优化总结大全</a></p>
|
|
149
149
|
<h3 id="构建工具选择"><a href="#构建工具选择" class="headerlink" title="构建工具选择"></a>构建工具选择</h3><p>针对不同的场景，选择最合适的工具<br><img src="https://user-gold-cdn.xitu.io/2019/12/17/16f12c6625059e8d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="GitHub"><br>通过对比，不难看出，Webpack和Rollup在不同场景下，都能发挥自身优势作用。webpack作为打包工具，但是在定义模块输出的时候，webpack确不支持ESM，webpack插件系统庞大，确实有支持模块级的Tree-Shacking的插件，如webpack-deep-scope-analysis-plugin。但是粒度更细化的，一个模块里面的某个方法，本来如果没有被引用的话也可以去掉的，就不行了….这个时候，就要上rollup了。rollup它支持程序流分析，能更加正确的判断项目本身的代码是否有副作用，其实就是rollup的tree-shaking更干净。所以我们的结论是rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 webpack 比较适合打包一些应用，例如 SPA 或者同构项目等等。</p>
|
|
150
150
|
<p>结论:在开发应用时使用 Webpack，开发库时使用 Rollup</p>
|
package/article/60327.html
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<p><img src="https://www.html.cn/newimg88/2018/09/1_ABNOknjk6gnMIRnyjT_m4Q.png" alt="xuehuayu.cn"></p>
|
|
25
25
|
<p>尽管如此，JavaScript 的“标准库”仍然会<a target="_blank" rel="noopener" href="https://www.infoworld.com/article/3048833/open-source-tools/brendan-eich-javascript-standard-library-will-stay-small.html">保持着这种蓬勃发展的状态</a>。 为填补这一空白，许多流行的实用程序库在过去几年中在GitHub上发展壮大。</p>
|
|
26
26
|
<p>以下是有用的且经常维护的库的列表推荐给大家：</p>
|
|
27
|
-
<h2 id="Underscore-
|
|
27
|
+
<h2 id="Underscore-Lodash-dah"><a href="#Underscore-Lodash-dah" class="headerlink" title="Underscore & Lodash (dah)"></a>Underscore & Lodash (dah)</h2><p>大多数人可能已经知道了这两个库。 Underscore 是构建 JavaScript 中常见任务提供实用程序功能。 Lodash是NPM下载量最大，依赖性最多的包，旨在为数组，字符串，对象和参数对象提供更一致的跨环境迭代支持。 它已经成为 Underscore 的超集，并且由相同的核心贡献者维护。 这两个库绝对应该在你的技术栈中。注：两者不同的地方可以看看 <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/13789618/differences-between-lodash-and-underscore?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa">stackoverflow 上的回答</a>。</p>
|
|
28
28
|
<p>Lodash ：<a target="_blank" rel="noopener" href="https://github.com/lodash/lodash">https://github.com/lodash/lodash</a></p>
|
|
29
29
|
<p>Lodash 中文文档：<a href="/doc/lodash/">https://www.html.cn/doc/lodash/</a></p>
|
|
30
30
|
<p>Underscore ：<a target="_blank" rel="noopener" href="https://github.com/lodash/lodash">https://github.com/lodash/lodash</a></p>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
</ul>
|
|
43
43
|
<h2 id="MathJS"><a href="#MathJS" class="headerlink" title="MathJS"></a>MathJS</h2><p>超过 6K 的stars，Math.js是一个 JavaScript 和 Node.js 中应用最广泛的 math 数学扩展库，它与JavaScript的内置 Math 库兼容。 该库包含一个灵活的表达式解析器，能够执行符号计算，并带有大量内置函数和常量。 你甚至可以自己扩展它。</p>
|
|
44
44
|
<p>Math.js ：<a target="_blank" rel="noopener" href="https://github.com/josdejong/mathjs">https://github.com/josdejong/mathjs</a></p>
|
|
45
|
-
<h2 id="Moment-
|
|
45
|
+
<h2 id="Moment-date-fns"><a href="#Moment-date-fns" class="headerlink" title="Moment/date-fns"></a>Moment/date-fns</h2><p>Moment 拥有超过40K的stars，moment.js是一个JavaScript日期和时间操作库，用于解析，验证，操作和格式化日期。 Moment旨在在浏览器和Node.js 环境中工作。 从 v2.10.0 开始，代码用ECMAScript 6模块编写。</p>
|
|
46
46
|
<p>Date-fns 是一个越来越流行的（超过11K的stars，每周超过50万次NPM安装）JavaScript 时间操作库，许多开发人员选择它来替换 moment.js（ 参见<a target="_blank" rel="noopener" href="https://github.com/date-fns/date-fns/issues/275#issuecomment-264934189">比较</a> ），提供超过130个函数来操作 浏览器 和 Node.js 中的日期。 Date-fns是使用纯函数构建的，并且在不更改传递日期实例的情况下保持不可变(immutable)。 它适用于webpack，Browserify或Rollup等打包器，并且还支持 tree-shaking。</p>
|
|
47
47
|
<p>moment.js ：<a target="_blank" rel="noopener" href="https://github.com/moment/moment/">https://github.com/moment/moment/</a></p>
|
|
48
48
|
<p>date-fns ：<a target="_blank" rel="noopener" href="https://github.com/date-fns/date-fns">https://github.com/date-fns/date-fns</a></p>
|