文章灵感来自 leetcode 一篇题解<a href="https://leetcode.cn/problems/isomorphic-strings/solutions/1623468/by-martin-wv-6fet">全网耗时最低解题思路:化归(48ms，100%)</a>
简单来说就是将数据格式进行转后，然后进行下一步操作，比如这道题<a href="https://leetcode.cn/problems/isomorphic-strings">205.同构字符串</a>
<pre><code>给定两个字符串 s 和 t ，判断它们是否是同构的。

如果 s 中的字符可以按某种映射关系替换得到 t ，那么这两个字符串是同构的。

每个出现的字符都应当映射到另一个字符，同时不改变字符的顺序。不同字符不能映射到同一个字符上，相同字符只能映射到同一个字符上，字符可以映射到自己本身。

示例 1:

输入：s = &quot;egg&quot;, t = &quot;add&quot;
输出：true
示例 2：

输入：s = &quot;foo&quot;, t = &quot;bar&quot;
输出：false
示例 3：

输入：s = &quot;paper&quot;, t = &quot;title&quot;
输出：true
</code></pre>
经过对题目的分析，判断两个字符串是否是「同构」需要判断 <code>s</code> 和 <code>t</code> 每个位置上的字符是否都一一对应，即 <code>s</code> 的任意一个字符被 <code>t</code> 中唯一的字符对应，同时 <code>t</code> 的任意一个字符被 <code>s</code> 中唯一的字符对应。这也被称为「双射」的关系。传统的做法是在遍历时存储两个映射，然后对比映射关系是否一致:
<pre><code class="hljs language-js">var isIsomorphic = function (s, t) {
 if (s.length !== t.length) {
 return false;
 }

 if (s.length &lt; 2) {
 return true;
 }

 const map = new Map();
 const set = new Set();
 for (let i = 0; i &lt; s.length; i++) {
 if (map.has(s[i])) {
 if (map.get(s[i]) !== t[i]) return false;
 } else {
 if (set.has(t[i])) return false;
 map.set(s[i], t[i]);
 set.add(t[i]);
 }
 }
 return true;
};
</code></pre>
但这种写法有些许难懂，我们可以用另一种方法来判断两个字符串是否「同构」-即将字符串转换为相同的表示结构再进行对比
<pre><code>egg -&gt; 122
abb -&gt; 122
</code></pre>
这样，我们只需要对比转换后的结果 <code>122</code> 和 <code>122</code> 是否一致就好了
<pre><code class="hljs language-js">var isIsomorphic = function (s, t) {
 if (s.length !== t.length) {
 return false;
 }
 if (s === t) {
 return true;
 }

 const p = (s) =&gt; {
 const m = {};
 return s.split(&quot;&quot;).reduce((acc, cur, index) =&gt; {
 if (!m[cur]) {
 m[cur] = index + 1;
 }
 return `${acc}${m[cur]}`;
 }, &quot;&quot;);
 };

 return p(s) === p(t);
};
</code></pre>
这种方法还可以在以下题目中使用
<a href="https://leetcode.cn/problems/word-pattern">290.单词规律</a>
通过将 <code>pattern</code> 和 <code>s</code> 分别转换为同样的格式，对别结果即可
<pre><code class="hljs language-js">const parse = (words) =&gt; {
 const r = {};
 return words.reduce((acc, cur, index) =&gt; {
 if (!r[cur]) {
 r[cur] = index + 1;
 }
 return `${acc}${r[cur]}`;
 }, []);
};

const r1 = parse(pattern.split(&quot;&quot;));
const r2 = parse(s.split(&quot; &quot;).map((w) =&gt; `_${w}`));

return r1 === r2;
</code></pre>

文章灵感来自 leetcode 一篇题解[全网耗时最低解题思路:化归(48ms，100%)](https://leetcode.cn/problems/isomorphic-strings/solutions/1623468/by-martin-wv-6fet)

简单来说就是将数据格式进行转后，然后进行下一步操作，比如这道题[205.同构字符串](https://leetcode.cn/pro

算法复习-化归思想

研究一下 <code>webpack</code> 的 运行时
webpack 运行时指在浏览器或 Node.js 环境中执行打包后的代码时， webpack 提供的一些辅助函数和对象。这些对象和函数帮助代码在运行时正确地加载和执行模块、处理依赖关系等。主要包括一下函数和对象
<ul>
<li>webpack_require 用来加载模块
</li>
<li>webpack_modules 用来存储各个模块的定义与实现
</li>
<li>webpack_exports 用来保存模块的导出对象
</li>
</ul>
分别针对如下代码讨论 <code>ESM</code> 和 <code>CommonJS</code> 构建输出
<pre><code class="hljs language-js">// foo.js
const foo = &quot;foo&quot;;

function sayHi() {
 console.log(&quot;hi&quot;);
}

module.exports = {
 sayHi,
};

exports.foo = foo;

// index.js
const { foo, sayHi } = require(&quot;./foo.js&quot;);

console.log(foo);

sayHi();
</code></pre>

 <h2>
 
 CommonJS
 
 </h2>
 执行 <code>npx webpack</code> 后，构建产物如下
<pre><code class="hljs language-js">(() =&gt; {
 var __webpack_modules__ = {
 &quot;./foo.js&quot;: (module, exports) =&gt; {
 const foo = &quot;foo&quot;;
 function sayHi() {
 console.log(&quot;hi&quot;);
 }
 module.exports = {
 foo,
 sayHi,
 };
 exports.foo = foo;
 },
 };
 var __webpack_module_cache__ = {};
 function __webpack_require__(moduleId) {
 var cachedModule = __webpack_module_cache__[moduleId];
 if (cachedModule !== undefined) {
 return cachedModule.exports;
 }
 var module = (__webpack_module_cache__[moduleId] = {
 exports: {},
 });
 __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 return module.exports;
 }
 var __webpack_exports__ = {};
 (() =&gt; {
 const { foo, sayHi } = __webpack_require__(/*! ./foo.js */ &quot;./foo.js&quot;);
 console.log(foo);
 sayHi();
 })();
})();
</code></pre>
简单梳理一下
<ol>
<li>初始化一个 <code>__webpack_modules__</code> 的对象，用于存放各个模块的定义和实现
</li>
<li>定义化一个 <code>__webpack_module_cache__</code> 对象，用于缓存加载过的模块
</li>
<li>定义一个 <code>__webpack_require__</code> 函数
</li>
<li>执行 <code>entry</code> 代码
</li>
</ol>
其中核心是 <code>__webpack_require__</code> 函数，在执行 <code>__webpack_require__</code> 时，其内部会执行 <code>__webpack_modules__</code> 中的模块，在执行时，会将 <code>module</code> 和 <code>module.exports</code> 以及 <code>__webpack_require__</code> 作为参数传递给模块代码，这将作为代码中的 <code>module</code> 和 <code>exports</code> 以及 <code>require</code> 。这样，代码中便可正确使用这些对象

 <h2>
 
 ESM
 
 </h2>
 ESM 和 CommonJS 的运行时核心流程一致， 但在一些实现上差异较大，同样是上面的代码，当构建为 <code>ESM</code> 格式时，产物如下
<pre><code class="hljs language-js">(() =&gt; {
 &quot;use strict&quot;;
 var __webpack_modules__ = {
 &quot;./foo.js&quot;: (
 __unused_webpack___webpack_module__,
 __webpack_exports__,
 __webpack_require__
 ) =&gt; {
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
 foo: () =&gt; foo,
 sayHi: () =&gt; sayHi,
 });

 let foo = &quot;foo&quot;;

 function sayHi() {
 console.log(&quot;hi&quot;);
 foo += &quot;hi&quot;;
 }
 },
 };
 var __webpack_module_cache__ = {};
 function __webpack_require__(moduleId) {
 //
 }
 (() =&gt; {
 __webpack_require__.d = (exports, definition) =&gt; {
 for (var key in definition) {
 if (
 __webpack_require__.o(definition, key) &amp;&amp;
 !__webpack_require__.o(exports, key)
 ) {
 Object.defineProperty(exports, key, {
 enumerable: true,
 get: definition[key],
 });
 }
 }
 };
 })();
 (() =&gt; {
 __webpack_require__.o = (obj, prop) =&gt;
 Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (() =&gt; {
 __webpack_require__.r = (exports) =&gt; {
 if (typeof Symbol !== &quot;undefined&quot; &amp;&amp; Symbol.toStringTag) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: &quot;Module&quot; });
 }
 Object.defineProperty(exports, &quot;__esModule&quot;, { value: true });
 };
 })();
 var __webpack_exports__ = {};
 (() =&gt; {
 __webpack_require__.r(__webpack_exports__);
 var _foo_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
 /*! ./foo.js */ &quot;./foo.js&quot;
 );
 console.log(_foo_js__WEBPACK_IMPORTED_MODULE_0__.foo);
 (0, _foo_js__WEBPACK_IMPORTED_MODULE_0__.sayHi)();
 console.log(_foo_js__WEBPACK_IMPORTED_MODULE_0__.foo);
 })();
})();
</code></pre>
主要差异在于
<ol start="0">
<li>给 <code>__webpack_require__</code> 挂载了几个函数</li>
</ol>
<ul>
<li>webpack_require.d 
</li>
<li>webpack_require.r
</li>
<li>webpack_require.o
</li>
</ul>
<ol>
<li>模块导出</li>
</ol>
在 <code>ESM</code> 规范中，导出的数据是对值的引用，如下面代码所示
<pre><code class="hljs language-js">let b = 1;
let obj = {
 b: 1,
};
function increaseB() {
 b += 1;
 obj.b += 1;
}
export { b, increaseB, obj };

console.log(b, obj); // 1 { b: 1 }
increaseB();
console.log(b, obj); // 2 { b: 2 }
</code></pre>
因此，不能直接在 <code>export</code> 对象上直接添加属性， <code>webpack</code> 的做法是这样的
<pre><code class="hljs language-js">// __webpack_require__.d
Object.defineProperty(exports, &#x27;foo&#x27;, {
 enumerable: true,
 get: () =&gt; foo,
});
</code></pre>
这样，每次引用 <code>foo</code> 变量时，都能拿到最新的数据

研究一下 `webpack` 的 运行时

webpack 运行时指在浏览器或 Node.js 环境中执行打包后的代码时， webpack 提供的一些辅助函数和对象。这些对象和函数帮助代码在运行时正确地加载和执行模块、处理依赖关系等。主要包括一下函数和对象

- **webpack_require** 用来加载模块

- **webpack_modules** 用来存储各个模块的定义与实现

-

webpack复习-运行时

<h2>
 
 模块化解决的问题
 
 </h2>
 <ul>
<li>外部模块的管理</li>
<li>内部模块的组织</li>
<li>模块源码到目标代码的编译和转换</li>
</ul>

 <h2>
 
 时间线
 
 </h2>
 <table>
<thead>
<tr>
<th>生态</th>
<th>诞生时间</th>
</tr>
</thead>
<tbody><tr>
<td>Node.js</td>
<td>2009</td>
</tr>
<tr>
<td>NPM</td>
<td>2010</td>
</tr>
<tr>
<td>requireJS(AMD)</td>
<td>2010</td>
</tr>
<tr>
<td>seaJS(cmd)</td>
<td>2011</td>
</tr>
<tr>
<td>browserify</td>
<td>2011</td>
</tr>
<tr>
<td>webpack</td>
<td>2012</td>
</tr>
<tr>
<td>grunt</td>
<td>2012</td>
</tr>
<tr>
<td>gulp</td>
<td>2013</td>
</tr>
<tr>
<td>react</td>
<td>2013</td>
</tr>
<tr>
<td>vue</td>
<td>2014</td>
</tr>
<tr>
<td>angular</td>
<td>2016</td>
</tr>
<tr>
<td>vite</td>
<td>2020</td>
</tr>
<tr>
<td>snowpack</td>
<td>2020</td>
</tr>
</tbody></table>

 <h2>
 
 外部模块的管理
 
 </h2>
 
 <h3>
 
 script标签
 
 </h3>
 如果我们要在项目里使用某个外部模块，最简单的方法就是去官网把相关的js文件下载下来放在项目目录，在要使用的html页面里通过script标签引用。这样简单粗暴的方法缺点明显：
<ul>
<li>使用上缺乏便利性</li>
<li>难以跟踪各个外部模块的来源</li>
<li>没有统一的版本管理机制</li>
</ul>

 <h3>
 
 npm
 
 </h3>
 2010年，npm伴随着Node.js的新版本一起发布。此后，外部模块管理从原始社会进入现代社会。
<ul>
<li>npm是一个远程的JavaScript代码仓库，所有的开发者都可以向这里提交可共享的模块，供其他开发者下载使用</li>
<li>npm还包含一个命令行工具，开发者通过运行<code>npm publish</code>将自己写的模块发布到npm仓库，通过运行<code>npm install xxx</code>可以将别人的模块下载到自己项目根目录下一个叫<code>node_modules</code>的文件夹里</li>
</ul>

 <h2>
 
 内部模块的组织
 
 </h2>
 
 <h3>
 
 script标签
 
 </h3>
 同引入外部模块一样，通过IIFE去组织内部模块并通过<code>script</code>标签引用
<pre><code class="hljs language-js">// a.js
var moduleA = (function () {
 // ...
})(window);

// b.js
var moduleB = (function () {
 // ...
})(window);
</code></pre>
<pre><code class="hljs language-html">&lt;script src&quot;/path/to/a.js&quot;&gt;&lt;/script&gt;
&lt;script src&quot;/path/to/b.js&quot;&gt;&lt;/script&gt;
</code></pre>
这种简单粗暴的方式缺点比较明显：
<ul>
<li>随着项目扩大，html文件中会包含大量<code>script</code>标签</li>
<li>模块间的复杂依赖关系仅靠<code>script</code>标签引用顺序来组织</li>
<li>污染全局环境，可能存在命名冲突</li>
</ul>

 <h3>
 
 AMD&amp;CMD&amp;CommonJS&amp;ESM
 
 </h3>
 AMD/CMD只是一种设计规范，而不是实现。AMD的主要实现有两个(RequireJS和curl.js)，CMD的主要实现有(sea.js)

 <h4>
 
 AMD(Asynchronous Module Define)主要包含两个API：define和require
 
 </h4>
 define方法用于定义一个模块，接收两个参数：
<ul>
<li>第一个参数是数组表示这个模块所依赖的其他模块</li>
<li>第二个参数是一个回调函数，通过入参的方式将所依赖模块的输出依次取出，并在方法内使用，返回值将作为其他依赖模块的引用</li>
</ul>
<pre><code class="hljs language-js">define([&#x27;Module1&#x27;], function (module) {
 return {
 }
}); 

require([&#x27;math&#x27;], function (math) {
　 math.sqrt(15)
});
</code></pre>
<code>define</code>能自定义模块而<code>require</code>只能引用其他模块，<code>require</code>的真正作用是执行模块加载
AMD规范去除了纯粹用script便签顺组组织模块带来的问题
<ol>
<li>通过依赖数组的方式声明依赖关系，具体依赖关系交给具体的AMD框架处理</li>
<li>避免生命全局变量带来的环境污染和变量冲突问题</li>
<li>模块异步加载，防止JS加载阻塞页面渲染</li>
</ol>

 <h4>
 
 CMD(Common Module Definition)
 
 </h4>
 有一个<code>define</code>API,接收一个<code>factory</code>回调函数，有三个参数：
<ul>
<li>require：一个方法标识符，调用它可以动态的获取一个依赖模块的输出</li>
<li>exports：一个对象，用于对其他模块提供输出接口，例如<code>exports.name = xxx</code></li>
<li>module：一个对象，存储了当前模块相关的一些属性和方法，其中<code>module.exports</code>等同于<code>exports</code></li>
</ul>
<pre><code class="hljs language-js">define(function(require, exports, module) {
 var moduleA = require(&#x27;/path/to/ModuleA&#x27;);
 module.exports = {}
})
</code></pre>

 <h4>
 
 CMD&amp;AMD的区别
 
 </h4>
 一方面，在依赖的处理上
<ul>
<li>AMD依赖前置，即通过依赖数组的方式提前声明当前模块的依赖</li>
<li>CMD依赖就近，在需要用到的时候通过调用<code>require</code>方法动态导入</li>
</ul>
另一方面，在本模块的输出上
<ul>
<li>AMD通过返回值的方式对外输出</li>
<li>CMD通过给<code>module.exports</code>赋值的方式对外输出</li>
</ul>

 <h3>
 
 CommonJS&amp;ESM
 
 </h3>
 <code>CommonJS</code>是Node.js使用的模块化方式
<pre><code class="hljs language-js">const ramda = require(&#x27;ramda&#x27;);

module.exports = {}
</code></pre>
<code>ESM</code>是<code>ES6</code>提出的模块化方案
<pre><code class="hljs language-js">impot { clone } from &#x27;ramda&#x27;;

export default {}
</code></pre>
<table>
<thead>
<tr>
<th></th>
<th>CommonJS</th>
<th>ESM</th>
</tr>
</thead>
<tbody><tr>
<td>加载时间</td>
<td>运行时加载</td>
<td>编译时输出接口</td>
</tr>
<tr>
<td>输出方式</td>
<td>原始类型为值的拷贝，引用类型为值的引用(指针)</td>
<td>值的引用(指针)</td>
</tr>
</tbody></table>

 <h4>
 
 输出方式比对
 
 </h4>
 <pre><code class="hljs language-js">// CommonJS
let a = 1;
let obj = {
 a: 1,
}
function increaseA() {
 a += 1;
 obj.a += 1;
}
module.exports = { a, increaseA, obj };

console.log(a, obj); // 1 { a: 1 }
increaseA();
console.log(a, obj); // 1 { a: 2 }

// ESM
let b = 1;
let obj = {
 b: 1,
}
function increaseB() {
 b += 1;
 obj.b += 1;
}
export { b, increaseB, obj };

console.log(b, obj); // 1 { b: 1 }
increaseB();
console.log(b, obj); // 2 { b: 2 }
</code></pre>
当使用 <code>export default b</code> 时， <code>increaseB</code> 后打印的值是一样的

 <h4>
 
 ESM如何解决循环依赖问题
 
 </h4>
 ESM 在编译时会构建出一份模块之间的关系图，会标记加载中的模块，这样便可识别出哪些模块间存在循环依赖；同时，在 ESM 模块中，导入的变量实际上是对导出变量的引用，这些引用被称为 顶层引用 。当存在循环依赖时，模块将导出一个未完成的值(undefined)给依赖模块，而不是抛出异常。但当引用加载中模块导出的变量时，会报错。
<pre><code class="hljs language-js">// a.js
import { foo } from &#x27;./circle-b.mjs&#x27;;

console.log(&quot;a.js is loading&quot;);

export const bar = &#x27;bar&#x27;;

// b.js
import { bar } from &#x27;./circle-a.mjs&#x27;;

console.log(&quot;b.js is loading&quot;);

export const foo = &#x27;foo&#x27;;

// node circle-a.mjs
// b.js is loading
// a.js is loading
</code></pre>
<ol start="0">
<li>当执行 a.js 时，标记 a.js 为 “获取中”</li>
<li>当 a.js 导入 b.js 时，ESM 会标记 b.js 为“获取中”，以避免再次进入。</li>
<li>当 b.js 导入 a.js 时，ESM 会发现 a.js 已经被标记为“获取中”，因此不会再次进入。</li>
<li>这样，循环引用不会导致死循环。</li>
</ol>
但当 <code>circle-b.mjs</code> 引用 <code>bar</code> 时，则会报错
<pre><code class="hljs language-js">// b.js
import { bar } from &#x27;./circle-a.mjs&#x27;;

// 在这里直接引用 foo
console.log(&quot;a.js is loading&quot;, bar);

export const foo = &#x27;foo&#x27;;

// 报错 ReferenceError: Cannot access &#x27;bar&#x27; before initialization
</code></pre>

 <h3>
 
 webpack/browserify
 
 </h3>
 AMD/CMD可以看作在线编译模块的方法，也就是等浏览器下载了这些js文件后才进行模块依赖分析，确定加载顺序和执行顺序，带来了一些问题
<ul>
<li>增加代码加载时间，影响用户体验</li>
<li>http请求过多，降低页面性能</li>
</ul>
于是有以下对应方法去解决：
<ul>
<li>提前将模块组织好</li>
<li>进行代码合并，把多个<code>script</code>的代码合并到少数几个文件中减少http请求个数</li>
</ul>
具有代表性的是<code>webpack</code>和<code>browserify</code>
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/webpack.png" alt="webpack">
打包工具面临的问题&amp;&amp;解决方案
打包后的文件体积过大
代码打包的初衷是减少AMD/CMD等框架造成的加载脚本数量过多的问题，但也带来了打包后单个文件体积过大的问题：如此一来，首屏加载时间缓慢，体验较差
于是webpack引入了代码拆分的功能(Code Splitting)来解决这个问题, 从全部打包后退一步：可以打包成多个包
<ul>
<li>第三方库和业务代码的分离：业务代码更新频率快，而第三方库代码更新频率是比较慢的。分离之后可利用浏览器缓存机制加载第三方库，从而加快页面访问速度</li>
<li>按需加载: 例如我们经常通过前端路由分割不同页面，除了首页外的很多页面(路由)可能访问频率较低，我们可将其从首次加载的资源中去掉，而等到相应的触发时刻再去加载它们。这样就减少了首屏资源的体积，提高了页面加载速度。</li>
</ul>

 <h3>
 
 bundleless(snowpack/vite)
 
 </h3>
 利用现代浏览器对ES6普遍支持良好的现状，开发环境下不进行打包。借助浏览器 ESM 的能力，一些代码基本可以做到无需构建直接运行。代表性工具是vite和snowpack
为什么要打包？
对于早期的 web 应用而言，打包模块既能够处理 JS 模块化，又能将多个模块打包合并网络请求。使用这类构建工具打包项目的确是个不错的选择。时至今日基本上主流的浏览器版本都支持 ESM，并且并发网络请求带来的性能问题，在 HTTP/2 普及下不像以前那么凸显的情况下，大家又将目光转向了 ESM。就目前的体验而言，基于原生 ESM 在开发过程中的构建速度似乎远远优于 webpack 之类的打包工具的。

 <h2>
 
 参考
 
 </h2>
 <a href="https://zhuanlan.zhihu.com/p/265632724">前端模块化的十年征程</a>
<a href="https://juejin.cn/post/6947890290896142350">ESM vs Webpack 面向高性能构建的探索</a>

## 模块化解决的问题

- 外部模块的管理
- 内部模块的组织
- 模块源码到目标代码的编译和转换

## 时间线

|  生态  |  诞生时间  |
| -- | -- |
|Node.js|2009|
|NPM|2010|
|requireJS(AMD)|2010|
|seaJS(cmd)|2011|
|browserify|2011|
|webpack|2012|
|grunt|20

JavaScript复习-模块化

<h2>
 
 初始化
 
 </h2>
 从配置文件、配置对象、命令行参数、默认配置中计算得到最终的参数，创建<code>Compiler</code>初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化<code>RuleSet</code>等

 <h2>
 
 确定入口
 
 </h2>
 根据配置中的<code>entry</code>找到所有入口文件，调用<code>compilation.addEntry</code>将入口文件转化为<code>dependence</code>对象

 <h2>
 
 构建
 
 </h2>
 根据<code>entry</code>对应的<code>dependence</code>创建<code>module</code>对象，调用<code>loader</code>将模块转译为标准 JavaScript 内容，调用 JavaScript 解释器将内容转换为 AST 对象，从中找出该模块依赖的模块，再递归本步骤直到所有入口依赖文件都经过本步骤的处理。递归完成之后就得到了模块间的依赖关系图
这个过程中数据流大致是module =&gt; ast =&gt; dependencies =&gt; module，先转 AST 再从 AST 找依赖。这就要求<code>loaders</code>处理完的最后结果必须是可以被<code>acorn</code>处理的标准 JavaScript 语法，比如说对于图片，需要从图像二进制转换成类似于<code>export default &quot;data:image/png;base64,xxx&quot;</code>这类 base64 格式或者<code>export default &quot;http://xxx&quot;</code>这类 url 格式

 <h2>
 
 生成
 
 </h2>
 构建阶段围绕<code>module</code>展开，生成阶段则围绕<code>Chunks</code>展开。经过构建阶段后，webpack 已经得到足够的模块内容与模块关系信息，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的<code>Chunk</code>，再把每个<code>Chunk</code>转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
webpack 内置的<code>chunk</code>封装规则：
<ul>
<li>entry 及 entry 能触及到的模块，组成一个<code>chunk</code></li>
<li>使用动态引入语句的模块，各自组合成一个<code>chunk</code></li>
<li>通过<code>optimization.splitChunks</code>来强制设定公用模块导出为一个<code>chunk</code></li>
</ul>

 <h2>
 
 资源形态流转
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/webpack-transform.png" alt="webpack转换过程">
<ul>
<li><code>compiler.make</code>，将<code>entry</code>以<code>dependence</code>对象形式加入<code>compilation</code>的依赖列表，<code>dependence</code>对象记录有<code>entry</code>的类型、路径等信息。根据<code>dependence</code>调用对应的工厂函数创建<code>module</code>对象，之后读入<code>module</code>对应的文件内容，调用<code>loader-runner</code>对内容转化，转化结果若有其他依赖则继续读入依赖资源，重复此过程直到所有依赖均被转化为<code>module</code></li>
<li><code>compilation.seal</code>，遍历<code>module</code>集合，根据<code>entry</code>配置及引入资源的方式，将<code>module</code>分配到不同的<code>chunk</code>，遍历<code>chunk</code>集合，调用<code>compilation.emitAsset</code>方法标记<code>chunk</code>的输出规则，即转化为<code>assets</code>集合</li>
<li><code>compiler.emitAssets</code>，将<code>assets</code>写入文件系统</li>
</ul>

 <h2>
 
 参考
 
 </h2>
 <a href="https://xie.infoq.cn/article/ddca4caa394241447fa0aa3c0">[万字总结] 一文吃透 Webpack 核心原理</a>

## 初始化

从配置文件、配置对象、命令行参数、默认配置中计算得到最终的参数，创建`Compiler`初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化`RuleSet`等

## 确定入口

根据配置中的`entry`找到所有入口文件，调用`compilation.addEntry`将入口文件转化为`dependence`对象

## 构建

根据`entry`对应的`depende

webpack复习-构建原理

<h2>
 
 构建过程
 
 </h2>
 <ol>
<li>初始化参数。从配置文件和命令行读取参数后合并，得到最终的参数</li>
<li>开始编译。用上一步得到的参数初始化 <code>Compiler</code> 对象，加载所有配置的插件，执行 <code>Compiler</code> 对象的 <code>run</code> 方法开始执行编译</li>
<li>确定入口。根据配置中的 <code>entry</code> 找出所有的入口文件</li>
<li>编译模块。从入口文件出发，调用所有配置的 <code>loader</code> 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理</li>
<li>完成模块编译。在经过第 4 步使用 <code>loader</code> 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系</li>
<li>输出资源。根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 <code>chunk</code> ，再把每个 <code>chunk</code> 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会</li>
<li>输出完成。在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件内</li>
</ol>

 <h2>
 
 Hash&amp;ChunkHash&amp;ContentHash 的区别
 
 </h2>
 <ul>
<li><code>hash</code>，根据构建目录生成，只要项目中有文件修改，则整个项目构建出来的<code>hash</code>都会改变</li>
<li><code>chunkHash</code>，和 webpack 打包到 chunk 有关，不同 entry 会生成不同的<code>chunkHash</code>。chunk 之间互不影响（一般用来打包公用 js）</li>
<li><code>contentHash</code>，根据文件内容生成<code>hash</code>，只要文件内容不变，生成的<code>contentHash</code>就不变（一般用来打包 css）</li>
</ul>

 <h2>
 
 loader 和 plugin
 
 </h2>
 loader 用来处理非 JavaScript 文件。webpack 将一切文件视为模块，但 webpack 只能处理 JavaScript 文件，如果想将其他文件也打包的话就要用到对应的 loader
plugin 用来扩展 webpack 的能力。webpack 在运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 api 改变输出结果

 <h2>
 
 webpack5 新特性
 
 </h2>
 <ul>
<li>启动命令变化<pre><code class="hljs language-js">{
 // v4
 &quot;start&quot;: &quot;webpack-dev-server&quot;
 // v5
 &quot;start&quot;: &quot;webpack serve&quot;
}
</code></pre>
</li>
<li>内置持久化缓存</li>
<li>资源模块</li>
<li>moduleIds 和 chunkIds 优化</li>
<li>移除 Node.js 的 polyfill</li>
<li><code>tree-shaking</code></li>
<li><code>module federation</code>。主要是用来解决多个应用之间代码共享的问题，可以让我们的更加优雅的实现跨应用的代码共享</li>
</ul>

 <h2>
 
 tree shaking
 
 </h2>
 一种优化，可以去除不必要的代码，减小打包后的体积
基于模块静态加载来实现。由于导入了哪些模块是确定的，编译的时候可以正确判断到底加载了哪些模块和变量，可以删除那些未被使用的变量或者引用

 <h2>
 
 常用配置
 
 </h2>
 <pre><code class="hljs language-js">const path = require(&quot;path&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const ProgressBarPlugin = require(&quot;progress-bar-webpack-plugin&quot;);
const chalk = require(&quot;chalk&quot;);
const { CleanWebpackPlugin } = require(&quot;clean-webpack-plugin&quot;);
const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
const CssMinimizerPlugin = require(&quot;css-minimizer-webpack-plugin&quot;);
const { DefinePlugin } = require(&quot;webpack&quot;);
const TerserPlugin = require(&quot;terser-webpack-plugin&quot;);
const entry = require(&quot;./webpack.entry&quot;);

const { PORT, MODE, MOCK } = process.env;

function generateHTMLPluginConfig(pages) {
 const items = Reflect.ownKeys(pages).map(
 (item) =&gt;
 new HtmlWebpackPlugin({
 chunks: [item, &quot;common&quot;],
 template: `./src/html/${item}.html`,
 filename: `${item}.html`,
 })
 );
 return items;
}

module.exports = {
 mode: MODE,
 entry,
 output: {
 filename: &quot;static/js/[name].[hash:8].js&quot;,
 path: path.resolve(__dirname, &quot;dist&quot;),
 },
 plugins: [
 new CleanWebpackPlugin(),
 ...generateHTMLPluginConfig(entry),
 new ProgressBarPlugin({
 format: `${chalk.green(&quot;Progressing&quot;)}[:bar]${chalk.green(
 &quot;:percent&quot;
 )}(:elapsed seconds)`,
 clear: false,
 }),
 new MiniCssExtractPlugin({
 filename: &quot;static/css/[name].[hash:8].css&quot;,
 chunkFilename: &quot;static/css/[id].css&quot;,
 }),
 new DefinePlugin({
 &quot;process.env&quot;: {
 MODE: JSON.stringify(MODE),
 MOCK,
 },
 }),
 ],
 module: {
 rules: [
 {
 test: /\.(html)$/,
 use: [&quot;html-withimg-loader&quot;],
 exclude: /node_modules/,
 },
 {
 test: /\.m?js$/,
 use: [
 {
 loader: &quot;babel-loader&quot;,
 options: {
 presets: [&quot;@babel/preset-env&quot;],
 },
 },
 &quot;eslint-loader&quot;,
 ],
 exclude: [/node_modules/, /lib/, /polyfill/],
 },
 {
 test: /\.css$/,
 use: [
 {
 loader: MiniCssExtractPlugin.loader,
 options: {
 publicPath: &quot;../&quot;,
 },
 },
 &quot;css-loader&quot;,
 &quot;postcss-loader&quot;,
 ],
 },
 {
 test: /\.less$/,
 use: [
 {
 loader: MiniCssExtractPlugin.loader,
 options: {
 publicPath: &quot;../&quot;,
 },
 },
 &quot;css-loader&quot;,
 &quot;postcss-loader&quot;,
 &quot;less-loader&quot;,
 ],
 },
 {
 test: /\.(png|jpg|gif|jpeg|svg|ttf)$/,
 use: [
 {
 loader: &quot;url-loader&quot;,
 options: {
 limit: 10240,
 esModule: false,
 name: &quot;static/img/[name].[hash:6].[ext]&quot;,
 publicPath: MODE === &quot;development&quot; ? &quot;/&quot; : &quot;/loginfe&quot;,
 },
 },
 ],
 exclude: /node_modules/,
 },
 ],
 },
 optimization: {
 minimize: true,
 minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
 splitChunks: {
 chunks: &quot;all&quot;,
 cacheGroups: {
 common: {
 name: &quot;common&quot;,
 test: /.js$/,
 minChunks: 2,
 minSize: 0,
 },
 },
 },
 },
 devServer: {
 contentBase: path.join(__dirname, &quot;dist&quot;),
 compress: true,
 port: PORT,
 disableHostCheck: true,
 host: &quot;0.0.0.0&quot;,
 proxy: {
 &quot;/v1/*&quot;: {
 target: &quot;xxx&quot;,
 changeOrigin: true,
 secure: false,
 headers: {},
 },
 },
 },
 devtool: MODE === &quot;production&quot; ? false : &quot;eval-source-map&quot;,
};
</code></pre>

 <h2>
 
 循环引用
 
 </h2>
 在<code>CommonJS</code>规范中，当遇到<code>require()</code>语句时，会执行<code>require</code>模块中的代码，并缓存执行的结果，当下次再次加载时不会重复执行，而是直接取缓存的结果
在<code>ESM</code>中，因为<code>import</code>是在编译阶段执行的，这样就使得程序在编译时就能确定模块的依赖关系，一旦发现循环依赖，ES6 本身就不会再去执行依赖的那个模块了，所以程序可以正常结束。这也说明了 ES6 本身就支持循环依赖，保证程序不会因为循环依赖陷入无限调用

 <h2>
 
 参考
 
 </h2>
 <a href="https://segmentfault.com/a/1190000038962700">小红书面试官：介绍一下 tree shaking 及其工作原理</a>
<a href="https://zhuanlan.zhihu.com/p/33049803">探索 JavaScript 中的依赖管理及循环依赖</a>

## 构建过程

1. 初始化参数。从配置文件和命令行读取参数后合并，得到最终的参数
2. 开始编译。用上一步得到的参数初始化 `Compiler` 对象，加载所有配置的插件，执行 `Compiler` 对象的 `run` 方法开始执行编译
3. 确定入口。根据配置中的 `entry` 找出所有的入口文件
4. 编译模块。从入口文件出发，调用所有配置的 `loader` 对模块进行翻译，再找出该

webpack复习-0

<h2>
 
 loader
 
 </h2>
 用来处理非 <code>javascript</code> 、 <code>json</code> 文件

 <h2>
 
 normal loader VS pitch loader
 
 </h2>
 <code>normal loader</code> 就是 <code>loader</code> 本身
<code>pitch loader</code> 就是<code>loader</code>上一个名为 <code>pitch</code> 的属性，也是个函数
<pre><code class="hljs language-js">function styleLoader(data) {
 return data;
}

styleLoader.pitch = (remainingRequest, previousRequest, data) =&gt; {
 // remainingRequest 表示剩余需要处理的loader的绝对路径和资源文件以!分割组成的字符串
 // previousRequest 它表示pitch阶段已经迭代过的loader按照!分割组成的字符串
 // data 处理normalLoader与pitchLoader的交互
 /**
 *
 * {
 * test: /\.css$/,
 * use: [&quot;style-loader&quot;, &quot;css-loader&quot;],
 * },
 *
 * remainingRequest: xxx/node_modules/.pnpm/css-loader@7.1.1_webpack@5.91.0/node_modules/css-loader/dist/cjs.js!xxx/src/index.css
 */
 // 当返回值
};
</code></pre>

 <h2>
 
 pitch loader 的执行顺序
 
 </h2>
 所有的 <code>pitch loader</code> 均在 <code>normal loader</code> 之前执行，如下所示
<img src="/img/pitch-loader-1.png" alt="loader执行顺序">
但当某一个 <code>pitch loader</code> 的返回值不为空时，即发生 <code>loader</code> 的熔断效应，即立即中断后续 loader 的执行，并从该 pitch loader 对应的 normal loader 开始执行
<img src="/img/pitch-loader-2.png" alt="loader的熔断效应">

 <h2>
 
 为什么需要 pitch loader
 
 </h2>
 实现一些特殊（取巧）逻辑
正常情况下， <code>loader</code> 的执行顺序为从右至左串型执行，且上一个 <code>loader</code> 的返回值为下一个 <code>loader</code> 的入参，假如要设计这么一个 <code>cache-loader</code> ，其作用是缓存上一次 <code>loader</code> 构建的结果，因此我们需要将 <code>cache-loader</code> 放在最左边，保证其最后执行。按照正常的执行顺序，每次构建时其余 <code>loader</code> 都会重新执行，这样就其不到作用。这时候，我们就可以给 <code>cache-loader</code> 增加 <code>pitch</code> 方法，在 <code>pitch</code> 阶段直接根据条件返回缓存的结果直接 熔断 其余 <code>loader</code> 的执行

 <h2>
 
 参考
 
 </h2>
 <a href="https://juejin.cn/post/7036379350710616078">多角度解析 Webpack5 之 Loader 核心原理</a>
<a href="https://juejin.cn/post/7037696103973650463">你不知道的「pitch loader」应用场景</a>

## loader

用来处理非 `javascript` 、 `json` 文件

## normal loader VS pitch loader

`normal loader` 就是 `loader` 本身

`pitch loader` 就是`loader`上一个名为 `pitch` 的属性，也是个函数

```js
function styleLoader(data) {
  ret

webpack复习-loader

<h2>
 
 module/bundle/chunk的区别
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/webpack_1.png" alt="module、bundle、chunk">
<ol>
<li>对于一份同逻辑代码，当我们手写下一个一个的文件，它们无论是ESM还是commonJS或AMD，它们都是module</li>
<li>当我们写module源文件传到webpack进行打包时，webpack会根据文件引用关系生成chunk文件，webpack会对这个chunk文件进行一些操作</li>
<li>webpack处理好chunk文件后，最后会输出bundle文件，这个bundle文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行</li>
</ol>
一句话总结：<code>module</code>、<code>chunk</code>、<code>bundle</code>其实就是同一份逻辑代码在不同转换场景下取的三个名字：我们直接写出来的是<code>module</code>，<code>webpack</code>处理时是<code>chunk</code>，最后生成浏览器可以直接运行的<code>bundle</code>

 <h2>
 
 filename/chunkFilename
 
 </h2>
 <code>filename</code>对应于<code>entry</code>里面的输入文件，经过webpack 打包后输出文件的文件名
<pre><code class="hljs language-json">{
 entry: {
 &quot;index&quot;: &quot;/path/to/index.js&quot;
 },
 output: {
 filename: &#x27;[name].[hash:8].js&#x27;
 }
}
</code></pre>
<code>chunkFilename</code>指未列在<code>entry</code>中却又要被打包出来的<code>chunk</code>文件的名称。一般来说，这个<code>chunk</code>文件指的就是需要懒加载的代码

 <h2>
 
 webpackPrefetch/webpackPreload/webpackChunkName
 
 </h2>
 <pre><code class="hljs language-js">import(/* webpackPrefetch: true */ &#x27;./path/to/LoginModal.js&#x27;);
</code></pre>
<code>webpackChunkName</code>是为预加载的文件取别名，<code>webpackPrefetch</code>会在浏览器闲置时下载文件，<code>webpackPreload</code>会在父<code>chunk</code>加载时并行下载文件

 <h2>
 
 hash/chunkhash/contenthash
 
 </h2>
 hash一般是结合CDN缓存来使用的。如果文件内容改变的话，那么对应文件hash值也会改变，对应的html引用的url地址也会改变，触发cdn服务器从源服务器上拉取对应数据进而更新本地缓存
<code>hash</code>是整个项目构建使用的，项目中如果有些变动，hash一定会变，比如说改动了utils.js，index.js里的代码虽然没有改变，但是大家都是用的同一份hash，hash一变，缓存一定会失效，这样子CDN就没有意义了
<code>chunkHash</code>就是解决这个问题的，它根据不同的入口文件(<code>entry</code>)进行依赖文件解析、构建对应的chunk，生成对应的hash值。一般用在<code>output</code>配置上
<code>contentHash</code>计算与文件内容本身有关。一般用在抽离<code>css</code>文件的插件配置上

 <h2>
 
 source-map 中 eval/cheap/inline
 
 </h2>
 source-map会生成独立的文件
cheap-source-map不会产生列映射
eval-source-map会以<code>eval</code>函数打包运行模块，不产生独立的map文件，会显示报错的行列信息
inline-source-map映射文件以base64格式编码，加载bundle文件最后，不产生独立的map文件

 <h2>
 
 loader vs plugin
 
 </h2>
 loader: 文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin: 在webpack运行的生命周期中会广播许多事件，plugin可以监听这些事件，在合适的时机通过调用webpack提供的api改变输出结果

 <h2>
 
 参考
 
 </h2>
 <a href="https://mp.weixin.qq.com/s/To_p4eYJx_dkJr1ApcR4jA">webpack 中最易混淆的 5 个知识点</a>
<a href="https://webpack.docschina.org">webpack文档</a>

## module/bundle/chunk的区别

![module、bundle、chunk](https://mrrsblog.oss-cn-shanghai.aliyuncs.com/webpack_1.png)

1. 对于一份同逻辑代码，当我们手写下一个一个的文件，它们无论是ESM还是commonJS或AMD，它们都是module
2. 当我们写module源文件传到webpack

webpack复习-易混淆知识点

<h2>
 
 数组
 
 </h2>
 JavaScript 中， <code>Array</code> 继承自 <code>Object</code> ，或者说它就是一个特殊的对象，内部是以 <code>key-value</code> 形式存储数据，所以 JavaScript 中的数组可以存放不同类型的值。它有两种存储方式，快数组与慢数组，初始化空数组时，使用快数组，快数组使用连续的内存空间，当数组长度达到最大时， <code>Array</code> 会进行动态的扩容，以存储更多的元素，相对慢数组，性能要好得多。当数组中 hole 太多时，会转变成慢数组，即以哈希表的方式（ <code>key-value</code> 的形式）存储数据，以节省内存空间。

 <h2>
 
 合并两数组
 
 </h2>
 <pre><code class="hljs language-js">const first = (arr) =&gt; arr[0];
const last = (arr) =&gt; arr[arr.length - 1];

function combineOrderedArrays(arr1, arr2) {
 if (!Array.isArray(arr1) || !Array.isArray(arr2)) throw new TypeError(&#x27;parameter must be an array&#x27;);
 if (arr1.length === 0) return arr2;
 if (arr2.length === 0) return arr1;
 if (first(arr1) &gt;= last(arr2)) return arr1.concat(arr2);
 if (first(arr2) &gt;= last(arr1)) return arr2.concat(arr1);

 let index1 = arr1.length - 1;
 let index2 = arr2.length - 1;
 let index = arr1.length + arr2.length - 1;
 const res = [...arr1];
 while (index2 &gt;= 0) {
 if (index1 &lt; 0) {
 res[index] = arr2[index2];
 index -= 1;
 index2 -= 1;
 } else {
 if (arr2[index2] &gt; arr1[index1]) {
 res[index] = arr2[index2];
 index2 -= 1;
 } else {
 res[index] = arr1[index1];
 index1 -= 1;
 }
 index -= 1;
 }
 }

 return res;
}
</code></pre>

 <h2>
 
 数组两数之和
 
 </h2>
 <pre><code class="hljs language-js">function sumOfTwoNumbers(src, target) {
 if (!Array.isArray(src)) throw new TypeError(&#x27;src must be an Array&#x27;);
 const tmp = new Map();
 for (let i = 0; i &lt; src.length; i += 1) {
 const abs = target - src[i];
 if (tmp.has(abs)) return [tmp.get(abs), i];
 tmp.set(src[i], i);
 }
 return [];
}
</code></pre>

 <h2>
 
 数组交集
 
 </h2>
 <pre><code class="hljs language-js">function intersection(arr1, arr2) {
 if (!Array.isArray(arr1) || !Array.isArray(arr2)) throw new TypeError(&#x27;parameters must be both of Arrays&#x27;);
 const tmp = new Set(arr1);
 const res = new Set();
 arr2.forEach((item) =&gt; {
 if (tmp.has(item)) res.add(item);
 });

 return Array.from(res);
}
</code></pre>

 <h2>
 
 参考
 
 </h2>
 <a href="https://github.com/sisterAn/JavaScript-Algorithms/issues/2">前端进阶算法2：从Chrome V8源码看JavaScript数组（附赠腾讯面试题）</a>

## 数组

JavaScript 中， `Array` 继承自 `Object` ，或者说它就是一个特殊的对象，内部是以 `key-value` 形式存储数据，所以 JavaScript 中的数组可以存放不同类型的值。它有两种存储方式，**快数组**与**慢数组**，初始化空数组时，使用快数组，快数组使用连续的内存空间，当数组长度达到最大时， `Array` 会进行动态的扩容，以存储更多的元素

算法复习-数组

<h2>
 
 OSI七层模型
 
 </h2>
 开放系统互联(Open Systems Interconncection )
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/osi.png" alt="OSI模型">

 <h2>
 
 TCP
 
 </h2>
 传输层协议
<ul>
<li>面向连接</li>
<li>每一个tcp连接只能是点对点的（一对一）</li>
<li>提供可靠交付服务</li>
<li>提供全双工服务</li>
<li>面向字节流</li>
</ul>
应用程序和TCP的交互是一次一个数据块（大小不等），但TCP把应用程序看成是一连串的无结构的字节流。TCP有一个缓冲，当应用程序传送的数据块太长，TCP就可以把它划分短一些再传送
当网络通信采用TCP协议时，在真正的读写操作之前，客户端与服务端之间必须建立一个连接，当读写完成之后，双方不再需要这个连接时可以释放这个连接。连接的建立依靠三次握手，而释放需要四次挥手，所以每个连接的建立都是需要资源消耗和时间消耗的

 <h2>
 
 TCP连接的建立过程（三次握手/四次挥手）
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/three-wayHandshake.png" alt="三次握手">
三次握手的过程：
<ol>
<li>第一次握手
 客户端向服务端发送连接请求建立报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入<code>SYN-SENT</code>状态
</li>
<li>第二次握手
 服务端收到请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完便进入<code>SYN-RECEIVED</code>状态
</li>
<li>第三次握手
 当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入<code>ESTABLISHED</code>状态，服务端收到这个应答后也进入<code>ESTABLISHED</code>状态，此时连接建立成功
</li>
</ol>
为什么需要三次握手？
存在这样一种情况：client发出的第一个连接请求报文段并没有丢失，而是在某个网络节点长时间地滞留了，以致延误到达已经释放连接后的server。本来这是一个早已失效的报文段，但server收到此失效的连接请求报文段后，就误以为这是client再次发出的一个新的连接请求，于是就向client发出确认报文段，同意建立连接。假设不采用三次握手而是两次握手，那么只要server发出确认，新的连接就建立了；由于现在client并没有发出去建立连接的请求，因此不会理睬server的确认请求，也不会向server发送数据。但server却以为新的连接已经建立，并一直等待client发送数据。这样，server的很多资源就白白浪费掉了。采用三次握手的方法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认，server由于收不到确认，就知道client并没有要求建立连接。
这个问题的本质是信道不可靠，但是通信双方需要就某个问题达成一致，而要解决这个问题，无论你在消息中包含什么信息，三次通信是理论上的最小值，所以三次握手并不是tcp本身的要求，而是为了满足在不可靠的信道上可靠传输信息这一需求所导致的。三次达到了，那后面你想接着握手也好，发数据也好，跟进行可靠信息传输的需求就没关系了，因此如果信道是可靠的，即无论什么时候发出消息对方一定能收到，或者不关心是否要保证对方收到你的消息，那样就能像udp那样直接发送消息就可以了
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/four-wayHandshake.png" alt="四次挥手">
为什么A(发起关闭的那一端)在TIME-WAIT状态必须等待2MSL的时间？
<ol>
<li>保证A发送的最后一个ACK报文段能够到达B。这个ACK报文段有可能丢失，因而使处在LAST-ACK状态的B收不到对已发送FIN+ACK报文段的确认，B会超时重传这个FIN+ACK报文段，而A就能在2MSL时间内收到这个重传的FIN+ACK报文段，接着A重传一次确认，重新启动2MSL计时器。最后，A和B都正常进入到CLOSED状态。如果A在发送完ACK报文段后立即释放连接，没有等待2MSL，那么就无法收到B重传的FIN+ACK报文段，因而也不会再发送一次确认报文段，这样B就无法按照正常步骤进入CLOSED状态</li>
<li>防止已失效的连接请求报文段出现在本连接中，A在发送完最后一个ACK报文段后，再经过2MSL，就可以使本连接持续的时间内所产生的报文段都从网络中消失，这样就可以使下一个新的连接中不会出现这样旧的连接请求报文段</li>
</ol>

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.zhihu.com/question/24853633/answer/63668444">TCP 为什么是三次握手，而不是两次或四次？ - wuxinliulei的回答 - 知乎</a>

## OSI七层模型

开放系统互联(Open Systems Interconncection )

![OSI模型](http://mrrsblog.oss-cn-shanghai.aliyuncs.com/osi.png)

## TCP

传输层协议

- 面向连接
- 每一个tcp连接只能是点对点的（一对一）
- 提供可靠交付服务
- 提供全双工服务
- 面向字节流

应用程序和TC

网络复习-OSI七层模型

<h2>
 
 keep-alive
 
 </h2>
 http协议是建立在tcp协议上的应用层协议，http协议的早期版本(HTTP/0.9和早期HTTP/1.0)最初是一个非常简单的协议，通信方式也是采用简单的请求-应答模式，即：客户端与服务器的每次请求都需要建立连接，服务器响应后即断开，再请求再重新创建
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/http-5.png" alt="http多次创建tcp">
tcp连接的新建成本较高，因为客户端和服务器建立连接时需要三次握手，传输一次数据耗时2xRTT + 数据传输时间:
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/request_http_time.png" alt="http传输一次数据耗时">
释放时则是四次挥手，需要2xRTT
所以HTTP/1.0引入了<code>keep-alive</code>，HTTP/1.0中默认是关闭的，可在请求头中添加<code>Connection: keep-alive</code>开启；HTTP/1.1默认开启
所谓<code>keep-alive</code>就是服务器在发送响应后在一定时间（通过http请求头<code>Keep-Alive: timeout max</code>设置）内仍然保持这条连接，使得同一个客户端可以继续使用这条连接传输后续的http请求报文和响应报文
<blockquote>
需要将 Connection 首部的值设置为 &quot;keep-alive&quot; 这个首部才有意义。同时需要注意的是，在HTTP/2 协议中， Connection 和 Keep-Alive 是被忽略的；在其中采用其他机制来进行连接管理。
</blockquote>
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/http-6.png" alt="http多次创建tcp">

 <h2>
 
 http2多路复用
 
 </h2>
 为什么HTTP/2引入多路复用：
HTTP/1.0引入的<code>Keep-Alive</code>有两种工作方式： 非流水线<code>without pipelining</code> 和 流水线<code>with pipelining</code> 
<ul>
<li>非流水线
 客户在收到上一个请求的响应后才能发送下一个请求。因此在TCP连接已建立后客户每访问一次对象就要用一个RTT，相较于非持续连接节省了一个RTT。但这仍然有一定的缺点：服务器在发送完一个对象后其TCP连接就处于空闲状态，浪费资源
</li>
<li>流水线
 客户在收到HTTP响应报文之前可以继续发送新的报文。于是一个接一个的请求报文到达服务器后，服务器就可以连续发回响应报文，但这要求服务器必须按照请求发送的顺序返回响应，当顺序请求多个文件时，其中一个请求因为某种原因被阻塞时，在后面排队的所有请求也一并被阻塞，这就是队头阻塞 (Head-Of-Line Blocking)
</li>
</ul>
HTTP2的多路复用
首先引入帧(frame)和流(stream)，因为HTTP/1.x是基于文本的，就导致在传输时只能串行去传。HTTP/2是基于流的，它就可以把HTTP消息分解为独立的帧，交错发送，然后在另一端通过帧中的标示重新组装，这就是多路复用。多路复用实现了在同一个TCP连接中，同一时刻可以发送多个请求和响应，且不用按照顺序一一对应，即使某个请求任务耗时严重，也不影响其他连接的正常执行
steam是一个独立的、客户端和服务端在HTTP/2连接下交换帧的双向序列集
HTTP/2在端点之间建立连接后，以Frame为基本单位交换数据。stream为一组共享同一streamID的frame集合
Connection,Stream,Frame 构成了这样的关系：Connection 和 Stream 是一对多的关系，Stream 和Frame也是一对多的关系
这样，就可以允许来自多个 Stream 的多个Frame 交错发送，在一个Connection上执行多播通信 （multiplexed communication）
并且，客户端也可以在一个TCP Connection 上发送多个请求。在同一个Connection上的请求现在可以不按次序给出响应——服务端可以根据QoS（服务质量）规则来决定响应内容的次序
<img src="http://mrrsblog.oss-cn-shanghai.aliyuncs.com/http-7.png" alt="http2的多路复用">

 <h2>
 
 http常见首部字段
 
 </h2>
 <table>
<thead>
<tr>
<th>名称</th>
<th>意义</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>Cache-Control</td>
<td>缓存设置<code>Cache-Control: private, max-age=0, no-cache</code></td>
<td>no-cache: no-cache 无 强制向源服务器再次验证no-store: 不缓存max-age: 100: 100s后失效</td>
</tr>
<tr>
<td>Connection</td>
<td>控制不再转发给代理的首部字段；管理持久连接</td>
<td><code>Connection: Upgrade/Keep-Alive</code></td>
</tr>
<tr>
<td>Date</td>
<td>创建HTTP报文的日期和时间</td>
<td>Date: Tue, 03 Jul 2012 04:40:59 GMT</td>
</tr>
<tr>
<td>Accept</td>
<td>告知服务器客户端可以处理的媒体类型及媒体类型的想对优先级</td>
<td>Accept: text/html,application/xhtml+xml,application/xml</td>
</tr>
<tr>
<td>Content-Length</td>
<td>本次返回的数据长度</td>
<td></td>
</tr>
<tr>
<td>Host</td>
<td>服务器域名/ip</td>
<td></td>
</tr>
</tbody></table>

 <h2>
 
 cache-control
 
 </h2>
 
 <h3>
 
 请求头部
 
 </h3>
 <pre><code class="hljs language-http">Cache-Control: max-age=&lt;seconds&gt;
Cache-Control: max-stale[=&lt;seconds&gt;]
Cache-Control: min-fresh=&lt;seconds&gt;
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: only-if-cached
</code></pre>

 <h3>
 
 响应头部
 
 </h3>
 <pre><code class="hljs language-http">Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: private
Cache-Control: public
Cache-Control: proxy-revalidate
Cache-Control: max-age=&lt;seconds&gt;
Cache-Control: s-maxage=&lt;seconds&gt;
</code></pre>
<code>public</code>: 表示可以被任何对象（浏览器、服务器、代理服务器等）缓存
<code>private</code>: 表示只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存）
<code>no-cache</code>: 使用协商缓存
<code>no-store</code>: 不使用任何缓存
<code>max-age=&lt;seconds&gt;</code>: 设置缓存存储的最大周期，超过这个时间（相对于请求的时间）缓存被认为过期
<code>s-maxage=&lt;seconds&gt;</code>: 针对于缓存服务器
<code>max-stale[=&lt;seconds&gt;]</code>: 表明客户端愿意接收一个已经过期的资源。可以设置一个可选的秒数，表示缓存最大的超时时间，该时间内可正常接收
<code>min-fresh=&lt;seconds&gt;</code>: 要求缓存服务器返回至少还未过指定时间的缓存资源。比如当指定<code>min-fresh</code>为60，过了 60 秒的资源都无法作为响应返回了

 <h2>
 
 http的演进
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/evo_of_http.png" alt="http的演进">
http1.1使用添加了keep-clive来复用tcp连接，改善了http1.0频繁创建tcp连接的性能开销。此外支持流水线(with pipelining)传输，使得客户端可以专注于发送而不必等待上一个请求的响应。可以在一定程度上减少整体的响应时间。但流水线也存在问题，虽然客户端可以一直发送，但服务器需要顺序响应，如果某一响应较耗时，那个客户端也一直收不到其他的响应（队头阻塞问题）。此外http1.1还有请求、响应头部(Header)较大(未经压缩就发送)、没有请求优先级控制等问题。
http2.0是基于https的，首先安全性有了保障，此外性能上较http1.1也有了不少改进。
<ol>
<li>http2.0会进行头部压缩：如果你发出多个请求，它们的头部是一样或相似的，那么协议会帮你消除重复的部分。
</li>
<li>http2不再像http1.x里的纯文本形式的报文，http/2是基于二进制的，头部和数据体统称为帧(frame)，这样虽然对人不太友好，但对于计算机来讲不用再将数据从文本转为二进制，而是直接解析二进制报文，增加了数据传输线率
</li>
<li>http/2的数据包不是顺序发送的，而是基于流的，同一个连接里可能有不同的请求/响应。因此每一个数据流都标记这独一无二的编号，客户端还可以指定数据流的优先级。
</li>
<li>http/2采用了多路复用的策略来进一步提升性能，移除了http/1.x中的流水线式的串行请求/响应方式。http/2可以在同一个连接中并发处理多个请求或响应，而不用排队等待，再也不会出现对头阻塞的问题了
</li>
<li>服务器推送。
</li>
</ol>
http/3把tcp改成了udp

 <h2>
 
 参考
 
 </h2>
 <a href="https://mp.weixin.qq.com/s/194SJUQz-mZBtg-kLd9fhA">了解 HTTP/1.x 的 keep-alive 吗？它与 HTTP/2 多路复用的区别是什么？</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Keep-Alive">MDN-HTTP</a>
<a href="https://stackoverflow.com/a/48516829/12241567">Why HTTP/2 does multiplexing altough tcp does same thing?</a>

## keep-alive

http协议是建立在tcp协议上的应用层协议，http协议的早期版本(HTTP/0.9和早期HTTP/1.0)最初是一个非常简单的协议，通信方式也是采用简单的请求-应答模式，即：客户端与服务器的每次请求都需要建立连接，服务器响应后即断开，再请求再重新创建

![http多次创建tcp](http://mrrsblog.oss-cn-shanghai.aliyunc

网络复习-0

深入研究一下 <code>Promise</code>
🤔

 <h2>
 
 令人疑惑的执行顺序
 
 </h2>
 观察以下代码片段
<pre><code class="hljs language-js">new Promise((resolve) =&gt; {
 console.log(&#x27;promise1 resolve&#x27;);
 resolve();
}).then(() =&gt; {
 console.log(&#x27;promise1 then1&#x27;);
 new Promise((resolve) =&gt; {
 console.log(&#x27;promise2 resolve&#x27;);
 resolve();
 }).then(() =&gt; {
 console.log(&#x27;promise2 then1&#x27;);
 }).then(() =&gt; {
 console.log(&#x27;promise2 then2&#x27;);
 })
}).then(() =&gt; {
 console.log(&#x27;promise1 then2&#x27;);
})
console.log(&#x27;hello Promise&#x27;);

// promise1 resolve
// hello Promise
// promise1 then1
// promise2 resolve
// promise2 then1
// promise1 then2
// promise2 then2
</code></pre>
Q1: 为什么 <code>hello Promise</code> 在较前打印？
A1: 因为 非重入期约方法 机制，即： 当 <code>Promise</code> 进入 <code>Settled</code> 状态时，与该状态相关的处理程序仅仅会被排期（进入微任务队列），而非立即执行。跟在添加这个处理程序的代码之后的同步代码一定会在处理程序之前执行。 <code>new Promise</code> 中的代码是同步的， <code>then</code> 方法中的处理程序是才是异步的。
Q2: 为什么 <code>promise2 then1</code> 在 <code>promise1 then2</code> 前打印
A2: 当打印 <code>promise2 resolve</code> 后，此时 <code>promise2</code> 进入 <code>Settled</code> 状态，此时会将 <code>promise2-then1</code> 添加进微任务队列，注意此时仍在执行微任务队列中的任务中，因此，接下来会打印 <code>promise2 then1</code> 。
Q3: 为什么 <code>promise1 then2</code> 在 <code>promise2 then2</code> 前打印
A3: 当打印完 <code>promise2 then1</code> 时，按理说应该注册 <code>promise2-then2</code> 回调，但编译器会优化，防止一个 <code>Promise</code> 占据过多时间。即如果有多个fulfilled的Promise实例，同时执行then链式调用，then会交替执行。

 <h2>
 
 为什么 Promise 状态不可逆
 
 </h2>
 确保 <code>Promise</code> 的行为是可预测和可靠的。这个设计决定主要有以下几个原因:
<ul>
<li>保证异步执行结果的可靠性:一旦 <code>Promise</code> 的状态被改变( <code>fulfilled</code> 或 <code>rejected</code> ),就不会再发生变化。这样可以确保异步操作的结果一定会被可靠地传递给后续的 then 或 catch 回调函数。
</li>
<li>简化错误处理: <code>Promise</code> 的状态一旦改变就不可逆,这意味着一个 <code>Promise</code> 对象只会触发一次 <code>then</code> 或 <code>catch</code> 回调。这简化了错误处理的逻辑,开发者不需要担心状态再次改变而引发新的错误。
</li>
<li>避免竞态条件: 如果 <code>Promise</code> 状态可逆,就可能出现竞态条件,即多个异步操作同时修改 <code>Promise</code> 状态,导致结果不可预测。状态不可逆可以避免这种情况的发生。
</li>
<li>更好的并行和串行组合: <code>Promise</code> 的状态不可逆使得多个 <code>Promise</code> 的并行和串行组合变得更加简单和可靠。开发者可以放心地使用 <code>Promise.all</code> 、 <code>Promise.race</code> 等方法,不必担心状态的变化会影响结果。
</li>
</ul>
总之, <code>Promise</code> 状态不可逆是为了确保异步编程中的可靠性和可预测性,这是 <code>Promise</code> 设计的一个重要特性。虽然有时会给开发带来一些限制,但总的来说这是一个合理的设计决定。

 <h2>
 
 为什么 try/catch 无法捕获 Promise.reject
 
 </h2>
 如下所示
<pre><code class="hljs language-js">try {
 Promise.reject(new Error(&quot;foo&quot;));
} catch (e) {
 console.log(e);
}

// Uncaught (in promise) Error: foo
</code></pre>
<code>Promise.reject</code> 并没有抛到执行同步代码的线程里，而是通过浏览器异步消息队列来处理的。因此，代码一旦以异步模式执行，则唯一与之交互的方式就是使用异步结构--更具体地说，就是 <code>Promise</code> 的方法

 <h2>
 
 为什么 Promise 不可取消
 
 </h2>
 <blockquote>
我们经常会遇到期约正在处理过程中，程序却不再需要其结果的情形。这时候如果能够取消期约就好了。某些第三方库，比如Bluebird，就提供了这个特性。实际上，TC39 委员会也曾准备增加这个特性，但相关提案最终被撤回了。结果，ES6期约被认为是“激进的”: 只要期约的逻辑开始执行，就没有办法阻止它执行到完成 --JS高程4
</blockquote>

 <h2>
 
 一个 Promise 一直没有被 resolve 或 reject 会造成内存泄漏吗
 
 </h2>
 分情况， <code>Promise</code> 可以认为是一个普通的对象，也遵循垃圾回收机制，当没有引用时，在合适的时机即被回收。但一些不规范的写法会造成内存泄漏，但却不是 <code>Promise</code> 引起的，比如下面的🌰
<pre><code class="hljs language-js">const p = new Promise((resolve) =&gt; {
 setTimeout(resolve, 100000000, null);
});
</code></pre>
这个 <code>Promise</code> 实例可能会长时间不会被回收从而造成内存泄漏，但本质原因在于 <code>setTimeout</code> 内部引用了 <code>resolve</code> 导致 <code>Promise</code> 无法被回收

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E6%97%B6%E5%BA%8F">MDN-使用Promise-时序</a>

深入研究一下 `Promise`

🤔

## 令人疑惑的执行顺序

观察以下代码片段

``` js
new Promise((resolve) => {
  console.log('promise1 resolve');
  resolve();
}).then(() => {
  console.log('promise1 then1');
  new Promise((resolve

JavaScript复习-Promise

JavaScript为异步非阻塞，ES6之前主要靠回调函数来实现异步，但由于回调函数容易出现回调地狱等问题，于是ES6+提供了了<code>Generator</code>、<code>Promise</code>、<code>async/await</code>这些API来降低异步编程的难度与复杂度。

 <h2>
 
 回调函数
 
 </h2>
 回调函数容易出现回调地狱，可读性差
<pre><code class="hljs language-js">function ajax(url, options, onSuccess) {
 // ...
}

ajax(&#x27;/api/xxx&#x27;, {}, function () {
 ajax(&#x27;/api/yyy&#x27;, {}, function () {
 ajax(&#x27;/api/zzz&#x27;, (), function () {
 })
 })
})
</code></pre>

 <h3>
 
 Generator
 
 </h3>
 形式上，<code>generator</code>函数是一个状态机，封装了多个内部状态。执行<code>generator</code>函数会返回一个遍历器对象
语法上，<code>generator</code>函数是一个普通函数。<code>function</code>关键字与函数名之间有一个<code>*</code>；函数体内使用<code>yield</code>表达式定义不同的内部状态
与普通函数不同，<code>generator</code>函数被调用后并不执行，返回的是一个指向内部状态的指针对象，也就是遍历器对象。下一步，必须调用遍历器对象的<code>next</code>方法使得指针移向下一个状态，也就是说每次调用<code>next</code>方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个<code>yield</code>或<code>return</code>
<pre><code class="hljs language-js">function* gen() {
 const str1 = yield &quot;hello&quot;
 // str1 = 222
 const str2 = yield &quot;world&quot;
 // str2 = 333
 return str2
}

const iter = gen()
console.log(iter.next())
// { value: &quot;hello&quot;, done: false }
console.log(iter.next(222))
// { value: &quot;world&quot;, done: false }
console.log(iter.next(333))
// { value: 333, done: false }
</code></pre>
第一次调用，<code>generator</code>函数开始执行，直到遇到第一个<code>yield</code>表达式为止。<code>next</code>方法返回一个对象，它的<code>value</code>值就是当前<code>yield</code>表达式的值，<code>done</code>的值为<code>false</code>
第二次调用，<code>generator</code>从上次<code>yield</code>表达式停下来的地方一直执行到下一个<code>yield</code>表达式 👆 ……
第三次调用，<code>generator</code>函数从上次<code>yield</code>表达式停下来的地方一直执行到<code>return</code>语句，<code>next</code>返回的<code>value</code>值就是<code>return</code>后面表达式的值，<code>done</code>为<code>true</code>
<code>yield</code>表达式本身没有返回值（或者说总是返回<code>undefined</code>）。<code>next</code>方法可以带一个参数，该参数会被当作上一个<code>yield</code>表达式的返回值

 <h2>
 
 Promise
 
 </h2>
 ES6提供的一种异步编程方案
一个<code>Promise</code>对象必然处于以下三种状态：
<ul>
<li>pending，初始状态</li>
<li>fulfilled，成功</li>
<li>rejected，失败</li>
</ul>
<code>pending</code>状态的<code>Promise</code>对象可以转换为<code>fulfilled</code>或<code>rejected</code>状态，而且此过程是不可逆的。当状态变更时，<code>then()</code>方法注册的回调就会被调用
<code>then()</code> 或者 <code>catch()</code> 的参数期望是函数，传⼊⾮函数则会发⽣值透传<code>(value =&gt; value)</code>
<code>Promise</code> 的异步特性: 它们是同步对象(在同步执行模式中使用)，但也是异步执行模式的媒介。
<pre><code class="hljs language-js">Promise.resolve(1)
 .then(2) // .then(1 =&gt; 1)
 .then(Promise.resolve(3)) // .then(1 =&gt; 1)
 .then(console.log)
// 1
</code></pre>
<pre><code class="hljs language-js">function fetch(url, options = {}) {
 return new Promise((resolve, reject) =&gt; {
 const xhr = new XMLHttpRequest();
 xhr.open(options.method || &#x27;GET&#x27;, url);
 const headers = { &#x27;Content-Type&#x27;: &#x27;application/json&#x27;, ...options.headers || {} };
 Reflect.ownKeys(headers)
 .forEach((header) =&gt; xhr.setRequestHeader(header, headers[header]));
 xhr.send(options.method === &#x27;POST&#x27; ? JSON.stringify(options.data || {}) : null);
 xhr.onerror = (e) =&gt; reject(e);
 xhr.onreadystatechange = () =&gt; {
 if (xhr.readyState === XMLHttpRequest.DONE
 &amp;&amp; [200, 201, 301, 302, 304].includes(xhr.status)) {
 resolve(JSON.parse(xhr.responseText));
 }
 };
 });
}
fetch(&#x27;http://localhost:3004/get&#x27;).then((res) =&gt; {
 console.log(res);
}).catch((e) =&gt; {
 console.error(e);
})
</code></pre>
<pre><code class="hljs language-js">new Promise((resolve,reject)=&gt;{
 console.log(&quot;1&quot;)
 resolve();
}).then(()=&gt;{
 // 外部第1个then
 console.log(&quot;2&quot;)
 new Promise((resolve,reject)=&gt;{
 console.log(&quot;3&quot;)
 resolve();
 }).then(()=&gt;{
 // 内部第1个then
 console.log(&quot;4&quot;)
 }).then(() =&gt; {
 // 内部第2个then
 console.log(&quot;5&quot;)
 })
}).then((res)=&gt;{
 // 外部第2个then
 console.log(&quot;6&quot;)
})
</code></pre>
简单来讲就是 <code>then</code> 回调的注册需要上一个 <code>then</code> 里面的同步代码执行完毕
拿上面的代码来讲，当外部第1个 <code>then</code> 里的 <code>resolve()</code> 执行完毕后，该 <code>Promise</code> 的状态已经更改，会将内部第1个 <code>then</code> 回调添加（注册）到微任务队列中；内部第2个 <code>then</code> 由于上一个 <code>then</code> 回调没有执行完毕，因此不会注册。此时外部第1个 <code>then</code> 里的同步代码执行完毕，会注册外部第2个 <code>then</code> 回调
整理一下：then回调注册的顺序是：外部第1个then --&gt; 内部第1个then --&gt; 外部第2个then --&gt; 内部第2个then
ps: 如果将外部第1个then里的new Promise(xxx)改为return new Promise(xxx)的话内部第2个then的注册将早于* 外部第2个then*

 <h2>
 
 async/await
 
 </h2>
 目前来讲，最为优秀的一种异步编程方案，与ES2017提出
实现上是<code>Generator</code>+<code>Promise</code>的语法糖
通过在<code>onFulFilled()</code>里调用<code>next()</code>、在<code>next()</code>里调用<code>onFulfilled()</code>形成一个自执行器，只有当全部代码执行完毕后才会终止
<pre><code class="hljs language-js">async function fn() {
 try {
 const res = await fetch(&#x27;http://localhost:3004/get&#x27;);
 console.log(res);
 } catch (e) {
 console.error(e);
 }
}
</code></pre>
<code>async/await</code>原理: 自动执行generator函数
<pre><code class="hljs language-js">const getData = () =&gt;
 new Promise((resolve) =&gt; setTimeout(() =&gt; resolve(&quot;data&quot;), 1000));

function* testG() {
 // await被编译成了yield
 const data = yield getData();
 console.log(&quot;data: &quot;, data);
 const data2 = yield getData();
 console.log(&quot;data2: &quot;, data2);
 return &quot;success&quot;;
}

function asyncToGenerator(generatorFunc) {
 return function (...args) {
 const gen = generatorFunc.apply(this, args);

 return new Promise((resolve, reject) =&gt; {
 function step(key, arg) {
 let generatorResult;
 try {
 generatorResult = gen[key](arg);
 } catch (error) {
 return reject(error);
 }

 const { value, done } = generatorResult;

 if (done) {
 return resolve(value);
 } else {
 return Promise.resolve(value).then(
 function onResolve(val) {
 step(&quot;next&quot;, val);
 },
 function onReject(err) {
 step(&quot;throw&quot;, err);
 }
 );
 }
 }
 step(&quot;next&quot;);
 });
 };
}

const testGAsync = asyncToGenerator(testG);
testGAsync().then((result) =&gt; {
 console.log(result);
});
</code></pre>

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise">MDN-Promise</a>
<a href="https://juejin.cn/post/6844903987183894535">深度揭秘 Promise 微任务注册和执行过程</a>
<a href="https://github.com/imtaotao/co-share">co-share</a>

JavaScript为异步非阻塞，ES6之前主要靠回调函数来实现异步，但由于回调函数容易出现回调地狱等问题，于是ES6+提供了了`Generator`、`Promise`、`async/await`这些API来降低异步编程的难度与复杂度。

## 回调函数

回调函数容易出现回调地狱，可读性差

``` js
function ajax(url, options, onSuccess) {

JavaScript复习-异步

JavaScript 代码在执行时，首先创建一个全局可执行上下文（<code>GlobalContext</code>），每当执行到一个函数调用时都会创建一个可执行上下文（<code>ExecutionContext</code>）EC。当然程序可能存在很多函数调用，那么就会创建很多 EC，所以 JavaScript 引擎创建了执行上下文栈（<code>ExecutionContextStack</code>）ECS来管理执行上下文。当函数调用完成，JavaScript 会退出这个执行环境并把这个环境销毁，回到上一个执行环境...。这个过程反复执行，直到执行栈中的代码全部执行完毕。

 <h2>
 
 执行上下文栈
 
 </h2>
 可以借助以下代码理解
<pre><code class="hljs language-js">let a = &quot;Hello World!&quot;;

function first() {
 console.log(&quot;Inside first function&quot;);
 second();
 console.log(&quot;Again inside first function&quot;);
}

function second() {
 console.log(&quot;Inside second function&quot;);
}

first();
console.log(&quot;Inside Global Execution Context&quot;);
</code></pre>
<img src="/img/ecs.png" alt="ecs">

 <h2>
 
 执行上下文
 
 </h2>
 简而言之，执行上下文就是对当前js代码被解析和执行所依赖的环境的抽象概念，执行上下文包含了当前执行的代码、变量和函数等信息。
执行上下文的创建阶段主要负责三件事：
<ol>
<li><code>this</code></li>
<li>Lexical Environment</li>
<li>Variable Environment</li>
</ol>

 <h2>
 
 词法环境
 
 </h2>
 js采用的是词法作用域（静态作用域），因此代码的书写顺序/位置决定了作用域
词法环境（Lexical Environment）：作用于词法分析阶段。包含两部分：
<ol>
<li>Environment Record（环境记录）是一个以全部局部变量为属性的对象（以及其他如 this 值的信息）。</li>
<li>对 outer lexical environment（外部词法环境）的引用，通常关联词法上的外面一层代码（花括号外一层）。</li>
</ol>
<code>Environment Record</code> 包含两种类型 声明性环境记录 和 对象环境记录 。后者出现在全局词法环境中。
词法环境是在代码定义的时候决定的，跟代码在哪⾥调⽤没有关系
<pre><code class="hljs language-js">// 全局执⾏上下⽂
GlobalExecutionContext = {
 // 词法环境
 LexicalEnvironment: {
 // 环境记录
 EnvironmentRecord: {
 Type: &quot;Object&quot;, // 全局环境
 // ... 标识符绑定在这⾥
 outer: &lt;null&gt;, // 对外部环境的引⽤
 }
 }
}
// 函数执⾏上下⽂
FunctionExecutionContext = {
 LexicalEnvironment: {
 EnvironmentRecord: {
 Type: &quot;Declarative&quot;,// 函数环境
 // ... 标识符绑定在这⾥
 // 对全局环境或外部函数环境的引⽤
 outer: &lt;Global or outer function environment reference&gt;,
 }
 }
}
</code></pre>

 <h2>
 
 词法环境与闭包
 
 </h2>
 <blockquote>
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure） --MDN
</blockquote>

 <h2>
 
 变量环境
 
 </h2>
 为了继续去适配早期 JavaScript 的<code>var</code>等，ES6 增加了变量环境（Variable Environment）。变量环境也是一个词法环境，其环境记录器包含有变量声明语句
在 ES6 中，词法环境和变量环境的区别在于前者用于存储函数声明和变量(<code>let</code>和<code>const</code>)绑定，而后者仅用于存储变量(<code>var</code>)绑定，同时变量环境同时会将变量初始化为 <code>undefined</code> 这就是 变量提升

 <h2>
 
 示例
 
 </h2>
 <pre><code class="hljs language-js">let a = 20;
const b = 30;
var c;
function multiply(e, f) {
 var g = 20;
 return e * f * g;
}
c = multiply(20, 30);
</code></pre>
词法构成
<pre><code class="hljs language-js">// 全局执⾏上下⽂
GlobalExecutionContext = {
 ThisBinding: &lt; Global Object &gt; ,
 // 词法环境
 LexicalEnvironment: {
 EnvironmentRecord: {
 Type: &quot;Object&quot;,
 // 标识符绑定，let、const、函数声明
 a: &lt; uninitialized &gt; ,
 b: &lt; uninitialized &gt; ,
 multiply: &lt; func &gt;
 }
 outer: &lt; null &gt;
 },
 // 变量环境
 VariableEnvironment: {
 EnvironmentRecord: {
 Type: &quot;Object&quot;,
 // 标识符绑定，var 声明
 c: undefined,
 }
 outer: &lt; null &gt;
 }
}

// 函数执⾏上下⽂
FunctionExecutionContext = {
 ThisBinding: &lt; Global Object &gt; ,
 LexicalEnvironment: {
 EnvironmentRecord: {
 Type: &quot;Declarative&quot;,
 // 标识符绑定
 Arguments: {
 0: 20,
 1: 30,
 length: 2
 },
 },
 outer: &lt; GlobalLexicalEnvironment &gt;
 },
 VariableEnvironment: {
 EnvironmentRecord: {
 Type: &quot;Declarative&quot;,
 // 在这⾥绑定标识符
 g: undefined
 },
 outer: &lt; GlobalLexicalEnvironment &gt;
 }
}
</code></pre>

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures">MDN-闭包</a>
<a href="https://hondrytravis.github.io/docs/typescript/javascript_workflow/">JS | 执行调度过程</a>
<a href="https://github.com/yued-fe/y-translation/blob/master/en/understanding-execution-context-and-execution-stack-in-javascript.md">理解 Javascript 执行上下文和执行栈</a>

JavaScript 代码在执行时，首先创建一个**全局可执行上下文（`GlobalContext`）**，每当执行到一个函数调用时都会创建一个**可执行上下文（`ExecutionContext`）EC**。当然程序可能存在很多函数调用，那么就会创建很多 EC，所以 JavaScript 引擎创建了**执行上下文栈（`ExecutionContextStack`）ECS**来管理执行上下文。当

JavaScript复习-JavaScript的执行过程

<h2>
 
 JavaScript数据类型
 
 </h2>
 原始Primitive类型：
<code>Number</code>、<code>String</code>、<code>Boolean</code>、<code>Undefined</code>、<code>Null</code>、<code>Symbol</code>、<code>Bigint</code>
引用类型
<code>Object</code>、<code>Array</code>、<code>Date</code>、<code>Function</code> 

 <h2>
 
 Symbol和Bigint
 
 </h2>
 <code>Symbol</code>表示唯一、不可变的值。用于确保对象属性使用唯一标识符，不会发生属性名冲突的危险； <code>Symbol.for</code>返回一致的结果
<code>BigInt</code>是一种数字类型的数据，它可以表示任意精度格式的整数，使用<code>BigInt</code>可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围
常见 <code>Symbol</code> 
<pre><code class="hljs language-js">// Object.prototype.toString
Symbol.toStringTag

// 将对象转换为相应的原始值（隐式类型转换）
Symbol.toPrimitive

// 迭代器
Symbol.Iterator
</code></pre>

 <h2>
 
 var vs let/const
 
 </h2>
 <ul>
<li>作用域问题</li>
<li>重复声明/赋值问题</li>
<li>变量提升</li>
<li>暂时性死区</li>
</ul>

 <h2>
 
 数据属性/访问器属性
 
 </h2>
 对象的属性有两种类型，数据属性和访问器属性
<ul>
<li>创建对象时默认就存在的属性为数据属性</li>
<li>通过<code>Object.defineProperty</code>设置的属性描述符中含有<code>set/get</code>的属性为访问器属性</li>
</ul>

 <h2>
 
 内部属性[[Class]]
 
 </h2>
 <a href="">Object.prototype.toString传送门</a>
<del>所有对象(<code>typeof</code>返回为<code>object</code>)都包含有一个内部属性<code>[[Class]]</code>，该属性不能直接访问，
可使用<code>Object.prototype.toString</code>来查看</del>
ES6移除了这个属性
<pre><code class="hljs language-js">Object.prototype.toString.call([]) 
//&quot;[object Array]&quot;

Object.prototype.toString.call(() =&gt; {})
// &quot;[object Function]&quot;
</code></pre>

 <h2>
 
 Object.prototype.toString
 
 </h2>
 拿到变量准确的类型
<pre><code class="hljs language-js">Object.prototype.toString.call([]) 
//&quot;[object Array]&quot;

Object.prototype.toString.call(() =&gt; {})
// &quot;[object Function]&quot;

/*
基本类型值string、number、boolean都可以打印这是因为JavaScript为基本类型值包装
了一个封装对象使它们变成了对象，而String()、Number()、Boolean()上有属性[[Class]]
*/
Object.prototype.toString.call(2)
// &quot;[object Number]&quot;

Object.prototype.toString.call(&quot;a&quot;)
// &quot;[object String]&quot;
</code></pre>
可通过重写变量的toString方法修改输出
<pre><code class="hljs language-js">const a = {
 get [Symbol.toStringTag]() {
 return &#x27;A&#x27;;
 }
}

Object.prototype.toString.call(&quot;a&quot;)
// &quot;[object A]&quot;
</code></pre>

 <h2>
 
 上下文、作用域链、闭包
 
 </h2>
 ~~ (执行)上下文：变量或函数的上下文决定 了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象(variable object) ，存储这个上下文中定义的所有变量和函数。函数局部上下文中的叫做活动对象(activity object)(活动对象最初只有一个定义变量<code>arguments</code>，全局上下文中没有这个变量)。上下文会在其所有代码都执行完毕后被销毁（全局上下文会在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）~~
<a href="https://blog.mrrs.top/post/JavaScript%E5%A4%8D%E4%B9%A0-JavaScript%E7%9A%84%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B">(执行)上下文</a>
作用域链：执行上下文的集合。上下文中的代码在执行时会创建变量对象(VO) 的一个作用域链，代码正在执行的上下文的变量对象始终位于作用域链的最前端。全局上下文的变量对象始终位于作用域链尾部
闭包（JS高程4）：指那些引用了另一个函数作用域中变量的函数。在一个函数内定义的函数会把其包含函数的活动(变量)对象添加到自己的作用域链中，外部函数的活动(变量)对象是内部函数作用域链上的第二个对象。闭包的本质是内部函数加长了其作用域链
闭包（<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures">MDN</a>）：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）
<pre><code class="hljs language-js">function createComparisonFunction(propertyName) {
 return function(object1, object2) {
 let value1 = object1[propertyName];
 let values = object2[propertyName];
 
 if (value1 &lt; value2) {
 return -1;
 } else if (value1 &gt; value2) {
 return 1;
 } else {
 return 0;
 }
 }
}

let compare = createComparisonFunction(&quot;name&quot;);
let result = compare({ name: &quot;Nicholas&quot; }, { name: &quot;&quot;Matt });
</code></pre>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/closure.png" alt="closure">
作用域和上下文的区别：
作用域是静态的，只要函数定义好了就一直存在并且不再发生变化。执行上下文是动态的，调用函数时创建，调用结束后会释放。上下文中包括了作用域

 <h2>
 
 this
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/this.png" alt="this">
<ul>
<li>先判断函数类型(箭头函数？bind生成？普通函数？)</li>
<li>普通函数判断调用方式(new？foo()？obj.foo()？)</li>
<li>不管 <code>bind</code> 几次，<code>fn</code>中的<code>this</code>始终由第一次<code>bind</code>决定</li>
<li>箭头函数中的<code>this</code>一旦被绑定就不会再改变</li>
</ul>
<pre><code class="hljs language-js">function fn() {
 console.log(this?.a);
}

let a = 12;

const obj = {
 a: 13,
 fn
};

const obj2 = {
 a: 14,
 fn: obj.fn,
 fn2() {
 fn();
 },
};

fn(); // undefined
obj.fn(); // 13
obj2.fn(); // 14
obj2.fn2(); // undefined
</code></pre>

 <h2>
 
 ==时的类型转换
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/%3D%3D%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2.png" alt="==时的类型转换">

 <h2>
 
 对象转原始类型
 
 </h2>
 对象转原始类型会调用内置的[[ToPrimitive]]函数：
<ol>
<li>如果存在<code>Symbol.toPrimitive()</code>方法，调用后返回</li>
<li>调用<code>valueOf()</code>，如果转换为原始类型则返回（使用<code>obj.valueOf = xxx</code>来定义）</li>
<li>调用<code>toString()</code>，如果转换为原始类型则返回</li>
<li>如果都没有返回原始类型则报错</li>
</ol>

 <h2>
 
 原型
 
 </h2>
 每个构造函数都有(<code>prototype</code>)一个原型对象，原型有一个属性(<code>constructor</code>)指回构造函数，而实例有一个内部指针(<code>__proto__</code>)指向原型
如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地如果另一个原型也有一个指针指向另一个构造函数。这样就在原型和实例之间构造了一条原型链。
<code>__proto_</code>_指向构造函数的原型，存在于对象中，指向原型
<code>prototype</code>存在于函数中，指向原型
<pre><code class="hljs language-js">function User() {}

const tom = new User();

tom.__proto__ === User.prototype // true
User.prototype.constructor === User // true
</code></pre>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/prototype.png" alt="原型">
<a href="">new的原理及手动实现</a>
<a href="">继承</a>

 <h2>
 
 new
 
 </h2>
 过程：
<ol>
<li>在内存中创建一个新的空对象</li>
<li>这个新对象内部的<code>__proto__</code>指针被赋值为构造函数的<code>prototype</code>值</li>
<li>构造函数内部的<code>this</code>被赋值为这个新对象（即<code>this</code>指向新对象）</li>
<li>执行构造函数内部的代码（给新对象添加属性）</li>
<li>如果构造函数返回非空对象，则返回该对象；否则返回刚创建的新对象</li>
</ol>
<pre><code class="hljs language-js">function create() {
 let obj = new Object()
 let Con = [].shift.call(arguments)
 obj.__proto__ = Con.prototype
 let result = Con.apply(obj, arguments)
 return typeof result === &#x27;object&#x27; ? result : obj
}
</code></pre>

## JavaScript数据类型

原始Primitive类型：

`Number`、`String`、`Boolean`、`Undefined`、`Null`、`Symbol`、`Bigint`

引用类型

`Object`、`Array`、`Date`、`Function` 

## Symbol和Bigint

`Symbol`表示唯一、不可变的值。用于确保对象属性使用唯一标识符，不

JavaScript复习-0

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一步和第三步中优化性能。直接使用缓存而不发起请求或发起了请求但后端存储的数据与浏览器缓存中的一致那就没必要将数据传输回来，直接读取缓存中的数据节省网络传输开销
缓存的意义在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也能减轻服务器压力。所以最佳实践就是尽可能命中强缓存，同时能在版本更新的时候让客户端的缓存失效

 <h2>
 
 缓存位置
 
 </h2>
 
 <h3>
 
 memory cache
 
 </h3>
 memory cache就是内存中的缓存，读取数据的速度比较快。虽然内存缓存高效，但是缓存持续性很短，会随着进程的释放而释放，一旦我们关闭页面，内存中的数据也就被释放了。（刷新页面不会丢失）

 <h3>
 
 disk cache
 
 </h3>
 存储在硬盘中的缓存，读取速度较内存慢，但存储量大，存储时间长。较<code>memory cache</code>胜在容量和时效性上
在所有浏览器缓存中，disk cache覆盖面基本是最大的。它会根据 <code>http header</code>中的某些字段判断哪些资源需要被缓存，哪些资源可以直接从缓存取而不用发送请求去获取。即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来就不会再去请求数据

 <h2>
 
 push cache
 
 </h2>
 http/2中的内容，仅在会话(session)中存在

 <h2>
 
 缓存策略
 
 </h2>
 通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置http header来实现的
<ol>
<li>浏览器每次发起请求，都会先在浏览器中查找该请求的结果及缓存标识</li>
<li>浏览器每次拿到返回的结果请求都会将该结果和缓存标识存入浏览器缓存中</li>
</ol>
发起请求及缓存处理流程：
<ol>
<li>浏览器在加载资源时，现根据这个资源的一些http header字段判断它是否命中强缓存，强缓存如果命中，浏览器会直接从自己的缓存中读取资源不会发送请求到服务器</li>
<li>当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据http header中的一些字段判断这个资源是否命中协商缓存，如果协商缓存命中，服务器会以304响应这个请求，不会返回该资源，告诉浏览器可以从缓存中读取；如果没命中则返回该资源</li>
</ol>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/browser_cache.png" alt="浏览器缓存策略">

 <h3>
 
 强缓存
 
 </h3>
 强缓存可以通过设置两种http header来实现：<code>Expires</code>和<code>Cache-Control</code>
<ul>
<li>Expires</li>
</ul>
<code>Expires: Web, 22 Oct 2021 08:41:00 GMT</code>
<code>Expires</code>是http/1的产物，表示资源会在<code>Web, 22 Oct 2021 08:41:00 GMT</code>后过期，需要再次请求。<code>Expires</code>受限于本地时间，如果修改了本地时间可能会造成缓存失效
<ul>
<li>Cache-Control</li>
</ul>
<code>Cache-Control: public, max-age=31536000</code>
<code>Cache-Control</code>出现在http/1.1，优先级高于Expires。该属性表示资源会在31536000秒后失效需要再次请求
<code>Cache-Control</code>可以在请求或响应头中设置，并且可以组合使用多种指令
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/cache_1.png" alt="cache-control">

 <h3>
 
 协商缓存
 
 </h3>
 协商缓存可以通过设置两种http header实现：<code>Last-Modified</code>和<code>ETag</code>
<ul>
<li><code>Last-Modified</code>和<code>If-Modified-Since</code></li>
</ul>
<code>Last-Modified</code>会随着访问资源时返回，表示该资源在浏览器上最后修改时间。浏览器再次请求资源时，<code>If-Modified-Since</code>会将<code>Last-Modified</code>的值携带上，询问服务器在该日期后资源是否有更新，有的话就会将新的资源送回来，否则返回304，即命中缓存
和<code>Expires</code>一样，本地打开缓存文件一样会导致缓存失效。此外，Last-Modified以秒计时，如果以更细粒度的时间内修改文件，服务器还是认为文件没有更新告诉浏览器可以使用缓存中的文件
<ul>
<li><code>ETag</code>和<code>If-None-Match</code></li>
</ul>
<code>ETag</code>类似文件指纹，也会随着请求资源时返回(浏览器生成)。浏览器再次请求资源时，<code>If-None-Match</code>会将<code>ETag</code>的值携带上，询问该资源的<code>ETag</code>是否有过变动，有变动的话就将最新的资源返回，否则返回304，即命中缓存
<code>ETag</code>的优先级高于<code>Last-Modified</code>
<ul>
<li><code>no-cache</code> 和 <code>no-store</code></li>
</ul>
<code>no-cache</code> 要求在使用缓存响应前进行验证。客户端可以存储资源，但每次都必须向服务器进行新鲜度校验。
如果资源仍然有效（状态码为 200），则客户端可以使用缓存；否则，需要从服务器获取新的资源（状态码为 304）。适用于需要强制服务器端新鲜度校验的情况，例如 <code>index.html</code> 或不带哈希的现代构建环境下的静态资源。
<code>no-store</code> 完全禁止在客户端存储响应数据。每次请求都必须从原始服务器重新获取数据，不允许任何形式的缓存存储。适用于防止无意中释放或保留敏感信息的场景，例如备份磁带上的数据。

 <h2>
 
 强缓存和协商缓存的异同
 
 </h2>
 强缓存和协商缓存的共同点是如果命中都是从缓存中读取资源数据；区别是协商缓存总是会发送一个请求而强缓存不会

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一步和第三步中优化性能。直接使用缓存而不发起请求或发起了请求但后端存储的数据与浏览器缓存中的一致那就没必要将数据传输回来，直接读取缓存中的数据节省网络传输开销

缓存的意义在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也能减轻服务器压力。所以最佳实践就是**尽可能命中强缓存，同时能

浏览器复习-缓存

使用继承的原因：复用

 <h2>
 
 基于原型链
 
 </h2>
 每个构造函数都有一个原型对象，原型对象有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也可能是一个对象...这样就在实例和原型之间构造了一条原型链
<pre><code class="hljs language-js">function SuperType() {
 this.property = true;
}
SuperType.prototype.getSuperValue = function () {
 return this.property;
}

function SubType() {
 this.property = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
 return this.property;
}

const instance = new SubType();
console.log(instance.getSuperValue());
const instance2 = new SubType();
console.log(instance2.getSuperValue());
// false
// false
</code></pre>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/extends_prototype.png" alt="基于原型链模式的继承">
问题：
<ol>
<li>原型中包含的引用值会在所有实例中共享</li>
<li>子类在实例化时不能给父类的构造函数传参</li>
</ol>

 <h2>
 
 盗用构造函数
 
 </h2>
 在子类构造函数中调用父类的构造函数
问题：
只继承了父类的属性，没有继承父类的方法
<pre><code class="hljs language-js">function SuperType(name) {
 this.name = name;
}
SuperType.prototype.getSuperValue = function () {
 return this.property;
}

function SubType(name, age) {
 SuperType.call(this, name);
 this.age = age;
}

const instance = new SubType(&#x27;tom&#x27;, 21);
console.log(instance);
const instance2 = new SubType(&#x27;jerry&#x27;, 22);
console.log(instance2);
console.log(instance2.getSuperValue);
// SubType { name: &#x27;tom&#x27;, age: 21 } 
// SubType { name: &#x27;jerry&#x27;, age: 22 }
// undefined
</code></pre>

 <h2>
 
 组合继承
 
 </h2>
 使用原型链继承方法，使用构造函数继承属性
<pre><code class="hljs language-js">function SuperType(name) {
 this.name = name;
}
SuperType.prototype.getSuperValue = function () {
 return this.name;
}

function SubType(name, age) {
 SuperType.call(this, name);
 this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
 return this.age;
}

const instance = new SubType(&#x27;tom&#x27;, 21);
const instance2 = new SubType(&#x27;jerry&#x27;, 23);
console.log(instance);
console.log(instance.getSubValue());
console.log(instance.getSuperValue());
console.log(instance2.name);
// SuperType { name: &#x27;tom&#x27;, age: 21 }
// 21
// tom
// jerry
</code></pre>

 <h2>
 
 寄生组合式继承
 
 </h2>
 组合式继承的缺点在于调用了两次父类的构造函数，造成了子类构造函数和实例上有一组相同的属性
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/prorotype_constructor_inheritance.png" alt="组合式继承的缺点">
寄生组合式继承通过盗用构造函数继承属性，使用混合式原型链继承方法
<pre><code class="hljs language-js">function inheritance(superType, subType) {
 const pro = Object.create(superType.prototype);
 pro.constructor = subType;
 subType.prototype = pro;
}
 
function SuperType(name, friends) {
 this.name = name;
 this.friends = friends;
}
SuperType.prototype.getSuperValue = function () {
 return this.name;
}

function SubType(name, age, friends, colors) {
 SuperType.call(this, name, friends);
 this.age = age;
 this.colors = colors;
}
inheritance(SuperType, SubType);
SubType.prototype.getSubValue = function () {
 return this.age;
}

const instance = new SubType(&#x27;tom&#x27;, 21, [], []);
instance.friends.push(&#x27;jerry&#x27;);
instance.colors.push(&#x27;pink&#x27;);
console.log(instance.getSuperValue());
console.log(instance.getSubValue());
console.log(instance.friends);
console.log(instance.colors);

const instance2 = new SubType(&#x27;jerry&#x27;, 21, [], []);
instance2.friends.push(&#x27;tom&#x27;);
instance2.colors.push(&#x27;black&#x27;);
console.log(instance2.friends);
console.log(instance2.colors);
// tom
// 21
// [ &#x27;jerry&#x27; ]
// [ &#x27;pink&#x27; ]
// [ &#x27;tom&#x27; ]
// [ &#x27;black&#x27; ]
</code></pre>

使用继承的原因：**复用**

## 基于原型链

每个构造函数都有一个原型对象，原型对象有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也可能是一个对象...这样就在实例和原型之间构造了一条原型链

``` js
function SuperType() {
    this.proper

JavaScript复习-继承

<h2>
 
 Array.prototype.sort算法
 
 </h2>
 <blockquote>
sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的， 会改变原数组
</blockquote>

 <h2>
 
 Array修改原数组 VS 返回新数组的API
 
 </h2>
 会改变原数组的API
<ul>
<li><code>push</code>: 在数组末尾添加一个或多个元素,并返回新的长度
</li>
<li><code>pop</code>: 删除并返回数组的最后一个元素
</li>
<li><code>shift</code>: 删除并返回数组的第一个元素
</li>
<li><code>unshift</code>: 在数组的开头添加一个或多个元素,并返回新的长度
</li>
<li><code>splice</code>: 添加/删除数组中的元素,并返回被删除的元素
</li>
<li><code>reverse</code>: 颠倒数组中元素的顺序
</li>
<li><code>sort</code>: 对数组的元素进行排序
</li>
<li><code>fill</code>: 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
</li>
</ul>

 <h2>
 
 Symbol用处
 
 </h2>
 <ol>
<li>表示一个独一无二的变量防止命名冲突
</li>
<li>提供一些特殊的属性 <code>[Symbol.iterator]</code> (可通过 <code>Reflect.ownKeys(Symbol)</code> 查看)
</li>
</ol>

 <h2>
 
 工程化
 
 </h2>
 通过一系列工具构建和维护有效的、实用的、高质量的前端应用

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">MDN-Array.prototype.sort</a>

## Array.prototype.sort算法

> sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的， **会改变原数组**

## Array修改原数组 VS 返回新数组的API

会改变原数组的API

- `push`: 在数组末尾添加一个或多个元素,并返回新的长度

- `pop`:

JavaScript复习-2

<h2>
 
 同源策略、CSP、CORS
 
 </h2>
 <blockquote>
同源的定义: 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源
</blockquote>
同源策略：控制不同的源之间如何交互资源
CSP: 内容安全策略（Content-Security-Policy）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS和数据注入等。核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码
CORS: 跨域资源共享（Cross-Origin Resource Sharing）是一种机制，它由一系列HTTP头部组成，这些头部决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。
跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的&quot;预检&quot;请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头
对于一些简单请求，并不会发送OPTION预检请求
<ul>
<li>使用GET/POST/HEAD方法</li>
<li>Context-type为&#39;test/plain&#39;或&#39;multipart/form-data&#39;或&#39;application/x-www-form-urlencoded&#39;</li>
</ul>
JSONP: 借助一些标签（比如 <code>script</code> ）没有跨域的限制，将标签的 <code>src</code> 属性设置为接口地址，以此来实现发送请求的目的。
<a href="https://blog.mrrs.top/post/JavaScript%E5%A4%8D%E4%B9%A0-1">JavaScript复习-1</a>

 <h2>
 
 XSS
 
 </h2>
 <blockquote>
跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。当被攻击者登陆网站时就会自动运行这些恶意代码，从而，攻击者可以突破网站的访问权限，冒充受害者。
</blockquote>
如果 Web 应用程序没有部署足够的安全验证，那么，这些攻击很容易成功。浏览器无法探测到这些恶意脚本是不可信的，所以，这些脚本可以任意读取 cookie，session tokens，或者其它敏感的网站信息，或者让恶意脚本重写HTML内容。

 <h3>
 
 XSS攻击的分类
 
 </h3>
 <ul>
<li>存储型
 注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。
</li>
<li>反射型
 用户将含有恶意代码的请求提交给 Web 服务器，Web 服务器接收到请求时，又将恶意代码反射给了浏览器端，这就是反射型 XSS 攻击
</li>
</ul>

 <h3>
 
 XSS攻击的危害
 
 </h3>
 <ul>
<li>利用虚假表单骗取用户个人信息</li>
<li>利用脚本窃取用户的cookie值，被害者在不知情的情况下帮助攻击者发送恶意请求</li>
</ul>

 <h3>
 
 预防XSS攻击
 
 </h3>
 过滤用户输入
<pre><code class="hljs language-js">function filter (str) {
 return str
 .replace(/&amp;/g, &#x27;&amp;amp;&#x27;)
 .replace(/ /g, &#x27;&amp;nbsp;&#x27;)
 .replace(/&lt;/g, &#x27;&amp;lt;&#x27;)
 .replace(/&gt;/g, &#x27;&amp;gt;&#x27;)
 .replace(/&quot;/g, &#x27;&amp;quot;&#x27;)
 .replace(/&#x27;/g, &#x27;&amp;#39;&#x27;)
 .replace(/\r{0,}\n/g, &#x27;&lt;br/&gt;&#x27;)
}
</code></pre>
CSP
cookie设置<code>HttpOnly</code>

 <h2>
 
 CSRF
 
 </h2>
 <blockquote>
跨站请求伪造（CSRF，Cross-site request forgery）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式
</blockquote>

 <h3>
 
 攻击流程
 
 </h3>
 <ol>
<li>受害者登录<a href="http://a.com%EF%BC%8C%E5%B9%B6%E4%BF%9D%E7%95%99%E4%BA%86%E7%99%BB%E5%BD%95%E5%87%AD%E8%AF%81(Cookie)">http://a.com，并保留了登录凭证(Cookie)</a></li>
<li>攻击者引诱受害者访问<a href="http://b.com">http://b.com</a></li>
<li><a href="http://b.com">http://b.com</a> 发送了一个请求： <a href="http://a.com?act=xxx">http://a.com?act=xxx</a> 。浏览器会默认携带<a href="http://a.com%E7%9A%84cookie">http://a.com的cookie</a></li>
<li><a href="http://a.com">http://a.com</a> 接收到请求后，对请求进行验证，确认是受害者，误以为是受害者自己发送的请求</li>
<li><a href="http://a.com">http://a.com</a> 以受害者的名义执行了act=xxx</li>
<li>攻击完成，受害者在不知情的情况下冒充受害者，让<a href="http://a.com">http://a.com</a> 执行了攻击者自定义的操作</li>
</ol>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/csrf.png" alt="CSRF攻击">

 <h3>
 
 如何防御
 
 </h3>
 防范CSFR攻击可以遵循以下几种规则：
<ul>
<li>不让第三方网站访问到用户cookie</li>
<li>阻止第三方网站请求接口</li>
<li>敏感接口请求时附带验证信息，比如token或验证码</li>
</ul>
具体防范方法：
<ol>
<li>samesite
 可以对cookie设置samesite属性。
<blockquote>
samesite选项有<code>strict</code> <code>Lax</code> <code>None</code> 三个值。<code>strict</code>：浏览器完全禁止第三方拿到cookie；<code>Lax</code>：相对宽松一点，在跨站点的情况下，从第三方站点点的链接打开或<code>Get</code>方式的表单提交这两种方式都会携带<code>Cookie</code>
</blockquote>
</li>
<li>referer
 <code>referer</code>是header的一部分，当浏览器向web服务器发送请求时，一般会带上referer信息告诉服务器是从哪个页面来的，服务器籍此可以获得一些信息用于处理。可以通过检查请求的来源来防御CSRF攻击。
</li>
<li>anti CSRF token
 目前比较完善的方案是加入anti-csrf token。即发送请求时在http请求中以参数的形式加入一个随机产生的token，并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值，会进行校验该请求当中的token和cookie当中的token值是否都存在且相等，才认为这是合法的请求。否则认为这次请求是违法的，拒绝该次服务。
 这种方法相比Referer检查要安全很多，token可以在用户登陆后产生并放于session或cookie中，然后在每次请求时服务器把token从session或cookie中拿出，与本次请求中的token 进行比对。由于token的存在，攻击者无法再构造出一个完整的URL实施CSRF攻击。但在处理多个页面共存问题时，当某个页面消耗掉token后，其他页面的表单保存的还是被消耗掉的那个token，其他页面的表单提交时会出现token错误。
</li>
</ol>

 <h2>
 
 SQL注入
 
 </h2>
 
 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS">MDN-CORS</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/CSRF">MDN-CSRF</a>

## 同源策略、CSP、CORS

> 同源的定义: 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源

同源策略：控制不同的源之间如何交互资源

CSP: 内容安全策略（Content-Security-Policy）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS和数据注入等。核心思想是**让服务器决定浏览

浏览器复习-安全

<h2>
 
 Reflect
 
 </h2>
 <code>Reflect</code> 本质上是一个提供了一种更标准、更规范的方式 (函数式) 来操作对象的内置对象。
<pre><code class="hljs language-js">// 旧方式
&#x27;prop&#x27; in obj
delete obj.prop
Object.defineProperty(...)

// Reflect方式
Reflect.has(obj, &#x27;prop&#x27;)
Reflect.deleteProperty(obj, &#x27;prop&#x27;)
Reflect.defineProperty(...)
</code></pre>
<code>Reflect</code> 一般和 <code>Proxy</code> 配套使用

## Reflect

`Reflect` 本质上是一个提供了一种更标准、更规范的方式 **(函数式)** 来操作对象的内置对象。

```js
// 旧方式
'prop' in obj
delete obj.prop
Object.defineProperty(...)

// Reflect方式
Reflect.has(obj, 'prop')
Reflect.deleteProperty(

JavaScript复习-3

## Proxy

`Proxy` 可以给目标对象定义一个关联的对象，而这个代理对象可以作为抽象的目标对象来使用。默认情况下，在代理对象上执行的所有操作都会无障碍地传播到目标对象。使用`new Proxy(target, handler)`来创建

`handler`对象中所有可以捕获的方法都有对应的反射 `Reflect` API方法，这些方法与捕获器拦截的方法具有相同的名称，也具有与被拦截

JavaScript复习-1

<blockquote>
迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现 <code>Iterable</code> 接口的对象都有一个 <code>Symbol.iterator</code> 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器 工厂，也就是一个函数，调用之后会产生一个实现 <code>Iterator</code> 接口的对象。 --&lt;&lt;JS 高程 4&gt;&gt;
</blockquote>

 <h2>
 
 可迭代协议
 
 </h2>
 数据结构必须暴露一个属性作为默认迭代器，而且这个属性必须使用特殊的<code>Symbol.iterator</code>作为键，以一个迭代器工厂函数作为值（调用其会返回一个一个新迭代器）
可迭代对象可使用的语言特性包括：
<ul>
<li><code>for-of</code>循环</li>
<li>数组解构</li>
<li>扩展操作符</li>
<li><code>Array.from()</code></li>
<li>创建集合</li>
<li>创建映射</li>
<li><code>Promise.all()</code>接收由<code>Promise</code>组成的可迭代对象</li>
<li><code>Promise.race()</code>接收由<code>Promise</code>组成的可迭代对象</li>
<li><code>yield* </code>操作符，在生成器中使用</li>
</ul>

 <h2>
 
 迭代器协议
 
 </h2>
 <ul>
<li>迭代器是一次性使用的对象</li>
<li>迭代器 API 使用 <code>next</code> 方法在可迭代对象中遍历数据。每次成功调用 <code>next</code> ，都会返回一个 <code>IteratorResult</code> 对象，其中包含迭代器返回的下一个值。</li>
<li>每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例相互之间没有关系，只会独立地遍历可迭代对象</li>
<li>迭代器并不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标来标记遍历可迭代对象的历程。如果可迭代对象在遍历期间被修改了，那么迭代器也会反应相应地变化</li>
</ul>
<pre><code class="hljs language-js">class Counter {
 constructor(limit) {
 this.limit = limit;
 }
 [Symbol.iterator]() {
 let count = 0;
 return {
 next: () =&gt; {
 count += 1;
 return {
 done: count &gt; this.limit,
 value: count,
 };
 },
 return: () =&gt; {
 console.log(&quot;Exiting early&quot;);
 return { done: true, value: undefined };
 },
 };
 }
}

const counter = new Counter(6);
for (const value of counter) {
 console.log(value);
 if (value &gt;= 4) break;
}

// 1
// 2
// 3
// 4
// Exiting early
</code></pre>

 <h2>
 
 提前终止迭代器
 
 </h2>
 <ul>
<li><code>for-of</code>循环通过<code>break</code>、<code>continue</code>、<code>return</code>、<code>throw</code>提前退出</li>
<li>解构操作并未消费的值</li>
</ul>
并非所有迭代器都是可关闭的，比如数组，因此可以实现从上次迭代结束的位置继续执行
<pre><code class="hljs language-js">const arr = [1, 2, 3, 4, 5];
const iter = arr[Symbol.iterator]();
for (const value of iter) {
 console.log(value);
 if (value &gt;= 3) {
 break;
 }
}

for (const value of iter) {
 console.log(value);
}

// 1
// 2
// 3
// ###########
// 4
// 5
</code></pre>

> 迭代器是一个可以由任意对象实现的接口，支持连续获取对象产出的每一个值。任何实现 `Iterable` 接口的对象都有一个 `Symbol.iterator` 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器 工厂，也就是一个函数，调用之后会产生一个实现 `Iterator` 接口的对象。 --<<JS 高程 4>>

## 可迭代协议

数据结构必须暴露一个属性作为**默认迭代器**，

JavaScript复习-迭代器

<h2>
 
 Diff
 
 </h2>
 
 <h3>
 
 什么 diff
 
 </h3>
 简单来讲就是在 <code>re-render</code> 时，以上一次的 <code>fiber</code> 树作为基础，以这次的 vdom 作为目标，生成一个新的 <code>fiber</code> 树，在此过程中尽量复用旧的节点。分别发生在 <code>reconcile</code> 阶段中的 <code>beginWork</code> 和 <code>completeWork</code> 中，在 <code>beginWork</code> 阶段，React 会遍历新的 vdom，并尝试复用旧的 <code>fiber</code> 节点。在 <code>completeWork</code> 阶段，React 会根据新的 vdom 和旧的 <code>fiber</code> 节点的比较结果，生成新的 fiber 树
第一次渲染时不需要 diff，直接由 vdom 生成 <code>fiber</code> 。再次渲染的时候，会产生新的 vdom，这时候就需要运用 diff 算法。
传统的 diff 算法，对于树的处理，时间复杂度在 O(n^3)，这对于前端框架来说太慢了，开销过于高昂，因此为降低时间复杂度，React 的 diff 算法会预设三个限制
<ol>
<li>只进行同层比较
</li>
<li>节点 <code>type</code> 不同时，直接删除节点（及其子孙节点）
</li>
<li>根据 <code>key</code> 来复用节点
</li>
</ol>

 <h2>
 
 为什么要有 diff
 
 </h2>
 为什么要做 diff 呢？直接使用新的 vdom 替换不可以吗？ 🤔
可以是可以，但无法实现一些功能，比如保持输入框的聚焦状态，丝滑的动画等等，而且频繁创建 dom 节点对浏览器也是不小的负担。
诶，那我们就不能自己来决定哪些 dom 更新吗？这样性能不更高效吗？
可以滴，对于复杂页面，程序员表示这 diff 谁爱做谁做，更新一个节点掉一根头发 👨‍🦲
SSR 并没有 diff

 <h3>
 
 性能
 
 </h3>
 <ol>
<li>合并大量 dom 操作并进行统一处理，减少重绘重排次数
</li>
<li>复用 dom 节点，减少创建/删除 dom 节点次数，而非全量重渲
</li>
</ol>

 <h3>
 
 状态
 
 </h3>
 <ol>
<li>保持某些特殊的状态
</li>
<li>实现更细滑的动画
</li>
</ol>

 <h2>
 
 如何实现 diff
 
 </h2>
 以下过程发生在 render 阶段
核心--复用
总结：同层比较，使用 <code>key</code> 和 <code>type</code> 决定节点的更新类型（新增、删除、移动）。由于是单链表对比，无法使用双指针优化，需要经过两次遍历对比出结果：
<ol>
<li>第一轮对比<code>key</code>，直至遇到 <code>key</code> 不一致的节点
</li>
<li>第二轮，将剩下的 <code>fiber</code> 节点存入 <code>map</code> 中，继续遍历剩下的新的 <code>element</code> ，从 map 中查找是否能复用
</li>
</ol>

 <h3>
 
 节点移动逻辑
 
 </h3>
 新增/删除逻辑较为简单，这里着重研究一下节点移动逻辑
以 👇 的数据为例
<pre><code class="hljs language-html">&lt;!-- before --&gt;
&lt;ul&gt;
 &lt;li id=&quot;A&quot; key=&quot;A&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;B&quot; key=&quot;B&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;C&quot; key=&quot;C&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;D&quot; key=&quot;D&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;E&quot; key=&quot;E&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- after --&gt;
&lt;ul&gt;
 &lt;li id=&quot;A&quot; key=&quot;A&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;C&quot; key=&quot;C&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;B&quot; key=&quot;B1&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;D&quot; key=&quot;D&quot;&gt;&lt;/li&gt;
 &lt;li id=&quot;E1&quot; key=&quot;E1&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
其中，删除了 <code>li#B</code> 和 <code>li#E</code> ，新增了 <code>li#B1</code> 和 <code>li#E1</code> ，将 <code>li#C</code> 向前移动
第一轮遍历，到达 <code>li#C</code> 时即停止，将 <code>li#B</code> 至 <code>li#E</code> 存至 <code>existingChildren</code> 中，以 <code>key</code> 或 <code>index</code> 作为键，更新 <code>lastPlacedIndex</code> 为 0, 开启第二轮遍历。
发现 <code>li#C</code> 可以复用，将其从 <code>existingChildren</code> 中删除，并更新 <code>lastPlacedIndex</code> 为 2 （在 <code>existingChildren</code> 中的位置）；继续遍历
发现 <code>li#B</code> 为新增
发现 <code>li#D</code> 可复用，并且 <code>li#D</code> 的 <code>index</code> 小于 <code>lastPlacedIndex</code> ， <code>li#D</code> 不用移动，同时更新 <code>existingChildren</code> 为 3
发现 <code>li#E</code> 为新增
遍历结束，标记 <code>existingChildren</code> 中其余节点为删除

 <h2>
 
 关联
 
 </h2>
 <a href="">双指针</a>
<a href="">深度优先遍历</a>

## Diff

### 什么 diff

简单来讲就是在 `re-render` 时，以上一次的 `fiber` 树作为基础，以这次的 vdom 作为目标，生成一个新的 `fiber` 树，在此过程中尽量复用旧的节点。分别发生在 `reconcile` 阶段中的 `beginWork` 和 `completeWork` 中，在 `beginWork` 阶段，React 会遍历新的 vdom，并

React.js复习-diff

流式服务端渲染
首先，让我们看一下 React18 之前是怎么实现 SSR 的

 <h2>
 
 HTTP分块传输
 
 </h2>
 不过在此之前，我们可能需要先了解一下HTTP分块传输
<blockquote>
分块传输编码（Chunked transfer encoding）是超文本传输协议（HTTP）中的一种数据传输机制，允许 HTTP 由网页服务器发送给客户端应用（ 通常是网页浏览器）的数据可以分成多个部分。分块传输编码只在 HTTP 协议 1.1 版本（HTTP/1.1）中提供。
</blockquote>
当 HTTP 的响应头设置 <code>Transfer-Encoding: chunked</code> 时，服务器端就可以将 Response 分段返回
如下示例
<pre><code class="hljs language-js">app.get(&quot;/&quot;, async (req, res) =&gt; {
 res.setHeader(&quot;Content-Type&quot;, &quot;text/html&quot;);
 res.setHeader(&quot;Transfer-Encoding&quot;, &quot;chunked&quot;);

 res.write(&quot;&lt;html&gt;&lt;body&gt;&lt;div&gt;First segment&lt;/div&gt;&quot;);
 res.write(&quot;&lt;div&gt;Second segment&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;&quot;);

 res.end();
});
</code></pre>
完整版 demo<a href="https://github.com/mrrs878/snippets/tree/main/demos/node-streaming">看这里</a>
在使用 telnet 测试时，可以清楚地看到响应报文中的 <code>chunked</code> 数据格式: 先是一行 16 进制数据（表示接下来数据的长度），然后是数据；然后再是 16 进制长度和数据，如此重复，最后是 0 长度分块结束
<img src="/img/streaming-ssr-4.png" alt="renderString timing">
这样，针对于页面渲染，浏览器就可以先渲染部分，而后持续接收服务端返回的数据来继续渲染

 <h2>
 
 renderToString &amp; renderToNodeStream
 
 </h2>
 这是 React18 之前提供的用于 SSR 的 API ，两个方法都可用于在服务端渲染组件，两者的区别在于 <code>renderToString</code> 会将一个组件渲染为 HTML 字符串， 而 <code>renderToNodeStream</code> 会将一个组件渲染称为一个 Node.js 可读流，可通过 <code>res.write</code> 将数据传递给客户端
这是一个典型的SSR应用架构。在用户访问页面时，先在服务端使用一些 React 提供的 API 将将组件渲染为 html 发送给客户端，这样客户端能够在 javascript 执行完毕前展示基本的 html 内容，减少白屏等待时间。然后在 javascript 加载完毕后对现有的 html 元素进行事件绑定（注水），注水完毕后才是一个正常的 React 应用
虽然可以实现 SSR ，但存在一些弊端： 
<ol>
<li>存在大量的阻塞性行为：服务端需要等待组件全部渲染完毕后才能发送给客户端；客户端需要等待所有组件的 javascript 加载完毕后才能进行注水操作（渲染逻辑复杂时，页面首次渲染到可交互之间可能存在较长的不可交互时间）
</li>
<li>不支持懒加载/代码分割
</li>
</ol>
好消息是 React18 中的 <a href="https://github.com/facebook/react/pull/14144">Fizz</a> 架构带来了两个新的特性可以完美解决这些问题，即Streaming HTML（流式渲染）和Selective Hydration（选择性注水）
接下来让我们看看 React18 是如何解决这些问题的

 <h2>
 
 流式渲染（Streaming HTML）
 
 </h2>
 
 <h3>
 
 renderToPipeableStream
 
 </h3>
 虽然 <code>renderToNodeStream</code> 相对于 <code>renderToString</code> 有一定的性能提升，但还存在一个问题需要等服务端将整个页面渲染完毕后才会开始传输数据，复杂情况下，如果某个组件内有耗时的操作，这样就会阻塞 HTML 的生成。对此，React18 提供了一个新的 API <code>renderToPipeableStream</code> ，相较于 <code>renderToNodeStream</code> 该方法可以分段传输 HTML 到浏览器，这样浏览器就可以更快地启动 HTML 的渲染，提高性能

 <h2>
 
 选择性注水 （Selective Hydration）
 
 </h2>
 
 <h2>
 
 Ref
 
 </h2>
 <ul>
<li><a href="https://zh.wikipedia.org/wiki/%E5%88%86%E5%9D%97%E4%BC%A0%E8%BE%93%E7%BC%96%E7%A0%81">分块传输编码</a>
</li>
<li><a href="https://zh-hans.reactjs.org/docs/react-dom-server.html#rendertonodestream">rendertonodestream</a>
</li>
<li><a href="https://juejin.cn/post/7064759195710521381">浅析 React 18 Streaming SSR（流式服务端渲染）</a>
</li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzg2ODQ1OTExOA==&amp;mid=2247501565&amp;idx=1&amp;sn=b9488bb90455e33eb94ec379c46ce42b&amp;chksm=cea971fcf9def8ea0f176bb06ab65ab4bcf20bfc605f8d728ca382a9de8e72cdfd7c1d1b0930&amp;token=805012839&amp;lang=zh_CN#rd">React Streaming SSR 原理解析</a>
</li>
</ul>

流式服务端渲染

首先，让我们看一下 React18 之前是怎么实现 SSR 的

## HTTP分块传输

不过在此之前，我们可能需要先了解一下**HTTP分块传输**

> 分块传输编码（Chunked transfer encoding）是超文本传输协议（HTTP）中的一种数据传输机制，允许 HTTP 由网页服务器发送给客户端应用（ 通常是网页浏览器）的数据可以分成多个部分。分块传输编码只

React.js学习-StreamingSSR

<img src="/img/etag.png" alt="编译">

 <h2>
 
 什么是ETag
 
 </h2>
 http响应头，服务端根据返回的资源生成，有两种语法—强/弱
有两种用途: 缓存、乐观并发控制

 <h2>
 
 缓存
 
 </h2>
 可用来实现协商缓存，大致流程如下
<img src="/img/etag-1.png" alt="协商缓存">
<ol>
<li>浏览器首次访问时，服务端基于返回的数据，根据「合适的算法」计算出一个hash串 ，并在响应头中携带进 <code>ETag</code> 头部
</li>
<li>浏览器「根据情况」适当缓存响应数据
</li>
<li>浏览器再次访问时，请求头中携带 <code>If-None-Match</code> ，服务端会判断该值是否是最新的，如果是，服务器则返回304状态码，浏览器直接使用本次已缓存的数据；否则返回200和最新的 <code>ETag</code>
</li>
</ol>

 <h2>
 
 实现乐观并发控制
 
 </h2>
 <blockquote>
在关系数据库管理系统里，乐观并发控制（又名“乐观锁”，Optimistic Concurrency Control，缩写“OCC”）是一种并发控制的方法。它假设多用户并发的事务在处理时不会彼此互相影响，各事务能够在不产生锁的情况下处理各自影响的那部分数据。在提交数据更新之前，每个事务会先检查在该事务读取数据后，有没有其他事务又修改了该数据。如果其他事务有更新的话，正在提交的事务会进行回滚。乐观事务控制最早是由孔祥重（H.T.Kung）教授提出。乐观并发控制多数用于数据竞争(data race)不大、冲突较少的环境中，这种环境中，偶尔回滚事务的成本会低于读取数据时锁定数据的成本，因此可以获得比其他并发控制方法更高的吞吐量。 -- wiki
</blockquote>
简单来讲就是对产生冲突的情况持一种「乐观」的态度，乐观并发控制将重点放在事务提交冲突检查上，而不是直接锁住数据不让访问
实现原理: 提交时带上 <code>If-Match</code> 头部，值为获取资源接口响应头中的<code>ETag</code> ，服务端判断如果该值是否为最新的，如果不匹配，则意味着数据已经被修改，抛出 <code>412</code> 前提条件失败错误

 <h2>
 
 Q&amp;A
 
 </h2>
 在实际使用过程中，有以下收获/踩过以下坑

 <h3>
 
 强/弱两种语法到底意味着什么
 
 </h3>
 现在还是不知道 🤷‍♂️

 <h3>
 
 ETag如何计算/生成
 
 </h3>
 并未规定算法，各web服务器实现方式不一，以下为 Node.js 的实现 <a href="https://github.com/jshttp/etag#readme">etag</a>
<ul>
<li>资源文件</li>
</ul>
<img src="/img/etag-3.png" alt="stattag">
使用文件长度+mtime
<ul>
<li>string/Buffer</li>
</ul>
<img src="/img/etag-2.png" alt="stattag">
内容长度+内容hash
ps: mtime(modified time, 指文件内容改变的时间戳)

 <h3>
 
 ETag改变，是否意味着资源一定发生变动
 
 </h3>
 不。当编辑文件却未更改文件内容时，或者 touch file，mtime 也会改变，此时 etag 会发生改变，但是文件内容没有更改

 <h3>
 
 ETag代表的协商缓存在POST请求中能使用吗
 
 </h3>
 不可以。尽管rfc规定在设置合适的响应头(<code>content-location</code>)后或合适的操作(先POST后GET，此时GET会使用缓存的POST数据)，浏览器可以缓存POST请求，但实验证明浏览器并没有实现该特性；并且，对于相同的url，POST请求会使GET请求的缓存失效

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag">ETag</a>
<a href="https://zh.m.wikipedia.org/zh-hans/%E4%B9%90%E8%A7%82%E5%B9%B6%E5%8F%91%E6%8E%A7%E5%88%B6">乐观并发控制</a>
<a href="https://stackoverflow.com/a/59569451/12241567">Is it possible to cache POST methods in HTTP?</a>

![编译](/img/etag.png)

## 什么是ETag

http响应头，服务端根据返回的资源生成，有两种语法—强/弱

有两种用途: 缓存、乐观并发控制

## 缓存

可用来实现协商缓存，大致流程如下

![协商缓存](/img/etag-1.png)

1. 浏览器首次访问时，服务端基于返回的数据，根据「合适的算法」计算出一个hash串 ，并在响应头中携带进 `ETag` 头部

ETag

<img src="/img/compiler-0.png" alt="编译">

 <h2>
 
 什么是编译
 
 </h2>
 编译：将高级语言翻译成汇编语言或机器语言的过程
高级语言：源语言；汇编语言/机器语言：目标语言
<ul>
<li>机器语言（Machine Language）：可以被计算机直接理解。与人类表达习惯相去甚远，难记忆、难编写、难阅读、易写错
</li>
<li>汇编语言（Assembly Language）：引入助记符。依赖于特定机器，非计算机专业人员使用受限制，编写效率依然低效
</li>
<li>高级语言（High Level Language）：类似于数学定义或自然语言的简洁形式。接近人类表达习惯，不依赖于特定机器，编写效率高
</li>
</ul>
ps: 编译型语言和解释型语言-编译型语言在编译过程中生成目标平台的指令，解释型语言在运行过程中才生成目标平台的指令。虚拟机的任务是在运行过程中将中间代码翻译成目标平台的指令。（详细信息可查看参考1）

 <h2>
 
 编译器的结构
 
 </h2>
 可大致分为两部分：前端，后端
<img src="/img/compiler-1.png" alt="编译">
前端（front end）：与源语言相关，又可分为：词法分析、语法分析、语义分析、中间代码生成几个阶段(phase)
后端（back end）：与目标语言相关，又可分为：目标代码生成、机器语言优化几个阶段(phase)
其中每个阶段都会读取上一阶段的输出，并产出独特的数据结构
阶段：编译器的逻辑组成，在实际实现过程中，多个阶段可能会被组合在一起（比如语义分析的结果通常会直接表示为中间代码的形式）

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.zhihu.com/question/21486706/answer/18642540">程序的编译与解释有什么区别？</a>

![编译](/img/compiler-0.png)

## 什么是编译

编译：将高级语言翻译成汇编语言或机器语言的过程

高级语言：源语言；汇编语言/机器语言：目标语言

- 机器语言（Machine Language）：可以被计算机直接理解。与人类表达习惯相去甚远，难记忆、难编写、难阅读、易写错

- 汇编语言（Assembly Language）：引入助记符。依赖于特定机器，非计算机专业

编译原理-绪论

<h1>
 
 WHAT
 
 </h1>
 模板方法是一种只需要使用继承就可以实现的较为简单的模式。
模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。
符合 OCP 原则

 <h1>
 
 WHY
 
 </h1>
 模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语 言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是不变的，所以我们把 这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的，于是我们把这 部分变化的逻辑封装到子类中。通过增加新的子类，我们便能给系统增加新的功能，并不需要改动抽象父类以及其他子类，这也是符合开放-封闭原则的

 <h1>
 
 HOW
 
 </h1>
 <ul>
<li>分离共同点
</li>
<li>写父类(子类的共同点)，保证子类一定会实现(使用抛异常、抽象类/抽象方法、构造函数等来约束)
</li>
<li>写子类，继承父类，实现父类的方法
</li>
</ul>

 <h2>
 
 传统继承实现
 
 </h2>
 <pre><code class="hljs language-javascript">// 抛异常约束版
class Beverage {
 boilWater() {
 console.log(&quot;把水煮沸&quot;);
 }
 brew() {
 throw new Error(&quot;子类应该实现brew方法&quot;);
 }
 pourInCup() {
 throw new Error(&quot;子类应该实现pourInCup方法&quot;);
 }
 addCondiments() {
 throw new Error(&quot;子类应该实现addCondiments方法&quot;);
 }
 /**
 * 封装了饮料的算法框架
 */
 init() {
 this.boilWater();
 this.brew();
 this.pourInCup();
 this.addCondiments();
 }
}

class Coffee extends Beverage {
 brew() {
 console.log(&quot;用沸水冲泡咖啡&quot;);
 }
 pourInCup() {
 console.log(&quot;把咖啡倒进杯子&quot;);
 }
 addCondiments() {
 console.log(&quot;加糖和牛奶&quot;);
 }
}

let coffee = new Coffee();
coffee.init();
</code></pre>

 <h2>
 
 高阶函数实现
 
 </h2>
 javascript 中，函数是一等公民，可以直接将函数传递进 init 中
<pre><code class="hljs language-js">const beverage = (param) =&gt; {
 const boilWater = () =&gt; {
 console.log(&quot;把水煮沸&quot;);
 }

 const brew = param.brew || (() =&gt; {
 throw new Error(&quot;应该传入brew方法&quot;);
 })

 const pourInCup = param.pourInCup || (() =&gt; {
 throw new Error(&quot;应该传入pourInCup方法&quot;);
 })

 const addCondiments = param.addCondiments || (() =&gt; {
 throw new Error(&quot;应该传入addCondiments方法&quot;);
 })

 /**
 * 封装了饮料的算法框架
 */
 const init = () =&gt; {
 boilWater();
 brew();
 pourInCup();
 addCondiments();
 }

 return {
 init
 }
}

const coffee = beverage({
 brew: () =&gt; {
 console.log(&#x27;用沸水冲泡咖啡&#x27;);
 },
 pourInCup: () =&gt; {
 console.log(&#x27;把咖啡倒进杯子&#x27;);
 },
 addCondiments: () =&gt; {
 console.log(&#x27;加糖和牛奶&#x27;);
 },
})

coffee.init();
</code></pre>

 <h1>
 
 变化
 
 </h1>
 兼容多种算法？有些子类的需要一些特殊的算法
钩子方法(hook)可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。我们在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，这由子类自 行决定。钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向

# WHAT

模板方法是一种只需要使用继承就可以实现的较为简单的模式。

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常**在抽象父类中封装了子类的算法框架**，包括实现一些公共方法及**封装子类中所有方法的执行顺序**。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

符合 OCP 原则

# WHY

模板方法模式是一种典型的通

设计模式-模板方法模式

学习一下「状态模式」

 <h2>
 
 从一个场景切入
 
 </h2>
 💡 需求：按下按钮，根据当前的状态，电灯会切换到新的状态 off-&gt;on/on-&gt;off
针对于这个小的需求，第一时间可能会写下这段代码
<pre><code class="hljs language-ts">enum State {
 on,
 off,
}

class Light {
 state: State;

 constructor() {
 this.state = State.off;
 }

 press() {
 if (this.state === State.on) {
 this.state = State.off;
 } else if (this.state === State.off) {
 this.state = State.on;
 }
 }
}
</code></pre>
测试一下
<pre><code class="hljs language-ts">const light = new Light();
console.assert(light.state === State.off);

light.press();
console.assert(light.state === State.on);

light.press();
console.assert(light.state === State.off);
</code></pre>
看起来实现了功能，但其实是存在一些隐患（缺陷）的：一段时间后，需求变了，电灯增加了一种状态--强光：在关闭的情况下，第一次打开是正常光，再按一下会切换到强光，再按一下才是关闭。针对于这个变动，我们上面的代码稍作改动也能处理：
<pre><code class="hljs language-ts">// ...
press() {
 if (this.state === State.off) {
 this.state = State.on;
 } else if (this.state === State.on) {
 // 打开的情况下再次按下会切换到强光
 this.state = State.superLight;
 } else if (this.state === State.superLight) {
 this.state = State.off;
 }
}
// ...
</code></pre>
但这仅仅是增加了一种状态，那如果以后再添加一种弱光，强强光。。。那都要去修改 <code>press</code> 方法，一来该函数将会变得极其臃肿；再者，该设计也违反了开闭原则：每次新增或修改 light 的状态，都需要修改 <code>press</code> 方法，这使得该函数非常不稳定，难以维护

 <h2>
 
 使用状态模式改进 💡 程序
 
 </h2>
 状态模式的关键是把事物的每种状态都封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部
<pre><code class="hljs language-ts">class State {
 light: Light;

 constructor(light: Light) {
 this.light = light;
 }

 press() {
 throw new Error(&quot;press方法必须被重写&quot;);
 }
}

class OffLightState extends State {
 light: Light;

 press() {
 console.log(&quot;on&quot;);
 this.light.setState(this.light.onLightState);
 }
}

class OnLightState extends State {
 light: Light;

 press() {
 console.log(&quot;superLight&quot;);
 this.light.setState(this.light.superLightState);
 }
}

class SuperLightState extends State {
 light: Light;

 press() {
 console.log(&quot;off&quot;);
 this.light.setState(this.light.offLightState);
 }
}

class Light {
 state: State;

 offLightState: OffLightState;

 superLightState: SuperLightState;

 onLightState: OnLightState;

 constructor() {
 this.onLightState = new OnLightState(this);
 this.offLightState = new OffLightState(this);
 this.superLightState = new SuperLightState(this);
 this.state = this.offLightState;
 }

 setState(state: State) {
 this.state = state;
 }
}

const light = new Light();
console.assert(light.state instanceof OffLightState);

light.state.press();
console.assert(light.state instanceof OnLightState);

light.state.press();
console.assert(light.state instanceof SuperLightState);

light.state.press();
console.assert(light.state instanceof OffLightState);
</code></pre>
在这里，我们创建了几个不同的 <code>State</code> ，这个状态都有一个 <code>press</code> 方法，代表开关被按下时执行的动作：切换下一个状态
使用状态模式后，代码量明显增加，但这样的好处非常明显：它可以使每一种状态和它对应的行为之间的关系局部化，这些行为被分散和封装在各自对应的状态类中，便于管理；此外，由于状态之间的切换都被分布在状态类内部，因此我们无需编写过多的 <code>if-else</code> 来控制状态之间的转换
当我们需要为 light 新增一种状态时，只需要增加一个新的 <code>State</code> 然后改变相关联的状态之前的切换规则即可

 <h2>
 
 使用状态机重构
 
 </h2>
 借助于 <code>xstate</code> 重构 💡 需求
<ol>
<li>创建状态机</li>
</ol>
<pre><code class="hljs language-js">import { createMachine } from &quot;xstate&quot;;

const lightMachine = createMachine({
 id: &quot;light&quot;,
 initial: &quot;off&quot;,
 states: {
 off: {
 on: {
 press: &quot;weak&quot;,
 },
 },
 weak: {
 on: {
 press: &quot;normal&quot;,
 },
 },
 normal: {
 on: {
 press: &quot;super&quot;,
 },
 },
 super: {
 on: {
 press: &quot;off&quot;,
 },
 },
 },
});

export { lightMachine };
</code></pre>
<ol start="2">
<li>使用</li>
</ol>
<pre><code class="hljs language-js">import { interpret } from &quot;xstate&quot;;
import { lightMachine } from &quot;./light.machine&quot;;

const lightService = interpret(lightMachine).onTransition(() =&gt; {
 console.log(&quot;lightService.state: &quot;, lightService.state.value);
});

lightService.start();

console.assert(lightService.state.value === &quot;off&quot;);

lightService.send(&quot;press&quot;);
console.assert(lightService.state.value === &quot;weak&quot;);

lightService.send(&quot;press&quot;);
console.assert(lightService.state.value === &quot;normal&quot;);

lightService.send(&quot;press&quot;);
console.assert(lightService.state.value === &quot;super&quot;);

lightService.send(&quot;press&quot;);
console.assert(lightService.state.value === &quot;off&quot;);
</code></pre>

 <h2>
 
 总结
 
 </h2>
 状态模式定义了状态与行为之间的关系，较为细致的区分了事物内部的状态，并且将跟此种状态相关的行为都封装在这个状态内部（比如切换到新的状态），避免了 Context 无限膨胀，方便增加新的状态和转换。但由于每个状态都需要一个类，较为繁琐，并且由于逻辑分散在各个状态类中，无形中增加了对整体的状态机逻辑的理解难度

学习一下「状态模式」

## 从一个场景切入

💡 需求：按下按钮，根据当前的状态，电灯会切换到新的状态 off->on/on->off

针对于这个小的需求，第一时间可能会写下这段代码

```ts
enum State {
  on,
  off,
}

class Light {
  state: State;

  constructor() {
    this.state = St

设计模式-状态模式

探究 Babel 内部的一些实现机制

 <h2>
 
 tokenizer/parse-有限状态机
 
 </h2>
 // TODO

 <h2>
 
 traverse-访问者模式
 
 </h2>
 Visitor（访问者模式）属于行为型模式
意图：表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。
访问者，顾名思义，就是对象访问的一种设计模式，我们可以在不改变要访问对象的前提下，对访问对象的操作做拓展：它将对象的操作权移交给了 Visitor。
Babel 在 traverse 阶段用到了访问者模式，该阶段 Babel 的主要工作包括：
<ol>
<li>对 ast 进行深度优先遍历
</li>
<li>对节点进行添加、更新和移除等操作
</li>
</ol>
<pre><code class="hljs language-ts">interface Phone {
 accept(visitor: Visitor): PhoneInfo;
}

interface PhoneInfo {
 os: string;
 chip: string;
 GPUType?: string;
 port?: string;
 screen?: string;
}

interface Visitor {
 visit(phone: Mate40): PhoneInfo;
 visit(phone: IPhone13): PhoneInfo;
}

class Mate40 implements Phone {
 accept(visitor: Visitor): PhoneInfo {
 return visitor.visit(this);
 }
}

class IPhone13 implements Phone {
 accept(visitor: Visitor): PhoneInfo {
 return visitor.visit(this);
 }
}

class PhoneVisitor implements Visitor {
 visit(phone: Mate40): PhoneInfo;
 visit(phone: IPhone13): PhoneInfo;
 visit(phone: unknown): PhoneInfo {
 if (phone instanceof Mate40) {
 return {
 os: &#x27;HarmonyOS&#x27;,
 chip: &#x27;Kirin 9000&#x27;,
 GPUType: &#x27;Mali-G78&#x27;,
 port: &#x27;type-c&#x27;,
 };
 }
 if (phone instanceof IPhone13) {
 return {
 os: &#x27;ios&#x27;,
 chip: &#x27;A15仿生芯片&#x27;,
 screen: &#x27;电容屏&#x27;,
 };
 }
 throw new Error(&#x27;不识别的phone&#x27;);
 }
}

const mate40 = new Mate40();
const visitor = new PhoneVisitor();
console.log(mate40.accept(visitor));

export {};
</code></pre>

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.codetd.com/article/13756799">由 Babel 理解前端编译原理</a>

探究 Babel 内部的一些实现机制

## tokenizer/parse-有限状态机

// TODO

## traverse-访问者模式

Visitor（访问者模式）属于行为型模式

意图：**表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。**

访问者，顾名思义，就是对象访问的一种设计模式，我们可以在不改变要访问对象的前提下

前端架构&软实力-babel

<a href="https://pnpm.io">pnpm</a> 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幽灵依赖” 的问题，让包管理更加规范，降低潜在风险发生的可能性

 <h2>
 
 安装&amp;使用
 
 </h2>
 <pre><code class="hljs language-bash">npm i pnpm -g
</code></pre>

 <h2>
 
 npm的历史遗留
 
 </h2>
 npm2(Node.js 0.11.14~4.9.1) 是通过嵌套的方式管理 <code>node_modules</code> 的
<img src="/img/npm2-node-modules-structure.png" alt="npm2-node-modules-structure">
这样的处理方式层级结构非常明显，可以清楚的知道当前安装的包，但是这样也存在不小的问题：
<ol>
<li>会有依赖下载多次的问题，无法复用
</li>
<li>目录层级太深，路径过长，有些操作系统会报错（在 windows 系统中文件路径不能超过 280 个字符）
</li>
</ol>
<img src="/img/heaviest-objects-in-the-universe.png" alt="heaviest-objects-in-the-universe">
npm3+(Node.js 5.0.0+) 是通过铺平的扁平化的方式来管理 <code>node_modules</code>
<img src="/img/npm3-node-modules-structure.png" alt="npm3-node-modules-structure">
安装时会遍历所有的节点，逐个将模块放在 node_modules 的第一层，当发现有重复模块时，则丢弃， 如果遇到某些依赖版本不兼容的问题，则继续采用 npm 2 的处理方式，前面的放在 node_modules 目录中，后面的放在依赖树中。该方式解决了 npm2 的部分问题，但也引入了其他的问题
<ol>
<li>幽灵依赖
</li>
<li>同名的包只会提升一个版本的，其余的版本依然会复制多次，而且该特性严重依赖包的安装顺序
</li>
</ol>

 <h2>
 
 pnpm 的优势
 
 </h2>
 简单描述一下 pnpm 的优势：
<ul>
<li>快。安装速度快。安装过的依赖会被精准缓存并拿来复用，基于内容寻址存储（CAS），包版本升级带来的变化都只 diff，绝不浪费一点空间
</li>
<li>狠。废除幽灵依赖
</li>
</ul>

 <h2>
 
 寻址方式
 
 </h2>
 pnpm 的 <code>node_modules</code> 结构
<img src="/img/pnpm-node-modules-structure.jpeg" alt="pnpm-node-modules-structure">
<ul>
<li>所有的 package 都安装在全局目录 <code>~/.pnpm/v3/files</code> 下，同一版本的包只存储一份内容，甚至不同版本的包也仅存储 diff 内容
</li>
<li>每个项目的 <code>node_modules</code> 下有 <code>.pnpm</code> 目录以平级结构管理每个版本的包的源码内容，以硬连接方式指向 pnpm-store 中的文件地址
</li>
<li>每个项目的 <code>node_modules</code> 下安装的包结构为树状，以软链接的方式将内容指向 <code>node_modules/.pnpm</code> 中的包（类似于 npm2）
</li>
</ul>
针对于使用 <code>pnpm</code> 管理的包，寻址一般会经历以下步骤：
<pre><code class="hljs language-js">// index.js
import { something } from &quot;bar&quot;;
</code></pre>
以 <code>bar</code> 这个包为例，寻址时的路径大概是这样的：
<code>node_modules/bar</code> -&gt;(软链) <code>node_modules/.pnpm/bar@1.0.0/node_modules/bar</code> -&gt;(硬链) <code>~/.pnpm-store/v3/files/00/xxx</code>

 <h2>
 
 幽灵依赖
 
 </h2>
 有些项目中未安装的包（未在 <code>package.json</code> 中声明），但仍然可以在项目里使用
产生的原因：在安装的时候， npm/yarn 会通过铺平的扁平化的方式来管理 <code>node_modules</code> ，因此项目文件中是可以寻址到这个包的
因为 pnpm 特殊的寻址设计，使得第一层可以仅包含 <code>package.json</code> 定义的包，使 <code>node_modules</code> 不可能寻址到未定义在 <code>package.json</code> 中的包，自然就解决了幽灵依赖的问题
<img src="/img/eslint-no-extraneous-dependencies.png" alt="eslint-no-extraneous-dependencies">

 <h2>
 
 硬链接/软链接
 
 </h2>
 硬链接通过 <code>ls originFilePath sourceFilePath</code> 创建，这样创建出来的两个文件都指向同一个文件存储地址，因此无论修改哪个文件，都相当于直接修改了原始地址的内容，导致两个文件内容同时变化。进一步说，通过硬链接创建的文件都是等效的，通过 <code>ls li ./</code> 查看文件属性时，可看到该文件有几个硬链接引用
<pre><code class="hljs language-bash"># 创建源文件
touch t.txt

# 编辑源文件（输入rererererere）
vim t.txt

# 创建硬链接
ln t.txt t_h.txt

# 查看源/目文件内容
cat t.txt # rererererere

cat cat t_h.txt # rererererere

# 查看源/目文件信息
ls -li ./t_h.txt ./t.txt

# 25881318 -rw-r--r-- 2 echo staff 13 8 15 19:41 ./t.txt
# 25881318 -rw-r--r-- 2 echo staff 13 8 15 19:41 ./t_h.txt

# 2 则表示该文件有几个硬链接引用
</code></pre>
软链接通过 <code>ls -s originFilePath sourceFilePath</code> 创建，可以认为是指向文件地址指针的指针，相当于常见的快捷方式
<pre><code class="hljs language-bash"># 创建软链接
ln -s t.txt t_s.txt

# 查看文件内容
cat t_s.txt # rererererere

# 查看文件信息
ls -li ./t_s.txt ./t.txt

# 25881318 -rw-r--r-- 2 echo staff 13 8 15 19:41 ./t.txt
# 25881568 lrwxr-xr-x 1 echo staff 5 8 15 19:46 ./t_s.txt -&gt; t.txt
</code></pre>
源文件被删除后，软链接会失效，但硬链接不会，软链接可以对文件夹生效。软链接本身只占很小的存储空间，硬链接 0 占用

 <h2>
 
 pnpm-store
 
 </h2>
 全局安装目录，存储所有的包（该目录可通过 <code>pnpm store path</code> 查看）
这个硬链接目标文件并不是普通的 NPM 包源码，而是一个哈希文件，这种文件组织方式叫做 content-addressable（基于内容的寻址）。简单来说，基于内容的寻址比基于文件名寻址的好处是，即便包版本升级了，也仅需存储改动 Diff，而不需要存储新版本的完整文件内容，在版本管理上进一步节约了存储空间。
pnpm-store 的组织方式大概是这样的：
<pre><code>~/.pnpm-store
- v3
 - files
 - 00
 - e4e13870602ad2922bfc7..
 - e99f6ffa679b846dfcbb1..
 ..
 - 01
 ..
 - ..
 ..
 - ff
 ..
</code></pre>
之所以能采用这种存储方式，是因为 NPM 包一经发布内容就不会再改变，因此适合内容寻址这种内容固定的场景，同时内容寻址也忽略了包的结构关系，当一个新包下载下来解压后，遇到相同文件 Hash 值时就可以抛弃，仅存储 Hash 值不存在的文件，这样就自然实现了开头说的，pnpm 对于同一个包不同的版本也仅存储其增量改动的能力。

 <h2>
 
 总结
 
 </h2>
 不同于npm/yarn，pnpm 采用了一种全新的包管理方式，不再是复制了，而是都从全局 store 硬连接到 <code>node_modules/.pnpm</code> ，然后之间通过软链接来组织依赖关系。这样不但节省磁盘空间，也没有幽灵依赖问题，安装速度还快，从机制上来说完胜 npm 和 yarn。

 <h2>
 
 参考
 
 </h2>
 <a href="https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/253.%E7%B2%BE%E8%AF%BB%E3%80%8Apnpm%E3%80%8B.md">253.精读《pnpm》.md</a>
<a href="https://rushjs.io/pages/advanced/phantom_deps/">Phantom dependencies</a>
<a href="https://nodejs.org/zh-cn/download/releases/">Node.js version</a>
<a href="https://www.infoq.cn/article/qj3z2ygrzdgicqauaffn">npm 依赖管理中被忽略的那些细节</a>
<a href="https://blog.pusher.com/what-you-need-know-npm-5/#:~:text=%24%20npm%20install%20npm%20added%20125%2C%20removed%2032%2C,network%20if%20something%20is%20missing%20from%20the%20cache.">Here’s what you need to know about npm 5</a>

[pnpm](https://pnpm.io) 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幽灵依赖” 的问题，让包管理更加规范，降低潜在风险发生的可能性

## 安装&使用

```bash
npm i pnpm -g
```

## npm的历史遗留

npm2(Node.js 0.11.14~4.9

前端架构&软实力-pnpm

一些 typescript 中的概念

 <h2>
 
 分发
 
 </h2>
 先上 demo
<pre><code class="hljs language-ts">type GetSomeType&lt;T extends string | number&gt; = T extends string ? &quot;a&quot; : &quot;b&quot;;

let one: GetSomeType&lt;string&gt;;
// &#x27;a&#x27;

let two: GetSomeType&lt;number&gt;;
// &#x27;b&#x27;

let three: GetSomeType&lt;string | number&gt;;
// ?
</code></pre>
对于 <code>three</code> 的类型，感觉会是什么呢？ <code>a</code> or <code>b</code> or <code>&#39;a&#39; | &#39;b&#39;</code> ？
<img src="/img/typescript-high-concept-0.png" alt="类型分发">
答案是 <code>&#39;a&#39; | &#39;b&#39;</code> !
有点意思， <code>three</code>的类型竟然被推导成为了 <code>&#39;a&#39; | &#39;b&#39;</code> 组成的联合类型
其实这就是所谓分发在捣鬼
抛开晦涩的概念来解读分发，结合上边的 Demo 来说所谓的分发简单来说就是分别使用 string 和 number 这两个类型进入 GetSomeType 中进行判断，最终返回两次类型结果组成的联合类型
那么，什么情况下会产生分发呢？满足分发需要一定的条件
<ol>
<li>毫无疑问分发一定是需要产生在 extends 产生的类型条件判断中，并且是前置类型
</li>
<li>分发一定是要满足联合类型，只有联合类型才会产生分发
</li>
<li>分发一定要满足所谓的裸类型中才会产生效果（像 <code>Array&lt;string&gt;</code> 就不属于裸类型）
</li>
</ol>
分发的作用/应用：实现一些工具类型，比如内置的 <code>Exclude</code> 和 <code>Extract</code> 等
<pre><code class="hljs language-ts">type TypeA = string | number | boolean | symbol;

type MyExclude&lt;T, U&gt; = T extends U ? never : T;
</code></pre>
<img src="/img/typescript-high-concept-1.png" alt="分发的应用-Exclude">

 <h2>
 
 逆变
 
 </h2>
 首先，思考一下如下场景
<pre><code class="hljs language-ts">let a!: { name: string; age: number };
let b!: { name: string };

b = a;

a = b;
</code></pre>
对于 <code>a = b</code> 这一赋值 ts 是会报错的
<img src="/img/typescript-high-concept-2.png" alt="类型安全性">
我们都清楚 TS 属于静态类型检测，所谓类型的赋值是要保证安全性的。
通俗来说也就是多的可以赋值给少的，上述代码因为 a 的类型定义中完全包括 b 的类型定义，所以 a 类型完全是可以赋值给 b 类型，这被称为类型兼容性。
但对于函数而言，刚好相反
<pre><code class="hljs language-ts">type A = { name: string; age: number };
type B = { name: string };

let fn1 = (a: A) =&gt; console.log(a.name);
let fn2 = (b: B) =&gt; console.log(b.name);

fn1 = fn2;

// 报错
fn2 = fn1;
</code></pre>
对于 <code>fn2 = fn1</code> 是会报错的，如下
<img src="/img/typescript-high-concept-3.png" alt="逆变">
逆变，描述的是函数之间互相赋值，参数之间的类型兼容性，参数少的可以赋值给参数多的，反之则不可
原因可以简单的理解为：函数之间的赋值复制的是指针，但函数调用时该函数的签名（js中并没有函数签名，只是为了方便解释）并没有跟随一起复制过去。
因此，拿上面的例子来讲：假设 <code>fn2 = fn1</code> 可以正常执行，在此操作后，执行 <code>fn2(b: B)</code> 实际上执行的是 <code>fn1</code> ，但入参是 <code>B</code> 类型，此时 <code>fn1</code> 内部可能会调用 <code>A</code> 中存在但 <code>B</code> 中不存在的一些属性，可能会报错。为了保证安全性，因此不允许这种赋值

 <h2>
 
 协变
 
 </h2>
 协变，描述的是函数之间互相赋值，返回值之间的类型兼容性，参数多的可以赋值给参数少的，反之则不可
例如
<pre><code class="hljs language-ts">type A = { name: string; age: number };
type B = { name: string };

let fn1!: () =&gt; A;
let fn2!: () =&gt; B;

// 报错
fn1 = fn2;

fn2 = fn1;
</code></pre>
<img src="/img/typescript-high-concept-4.png" alt="协变">
其实这种现象也很好理解：就像普通变量赋值一样，为保证类型安全性，阻止了该行为

 <h2>
 
 参考
 
 </h2>
 <a href="https://juejin.cn/post/7089809919251054628">如何进阶 TypeScript 功底？一文带你理解 TS 中各种高级语法</a>

一些 typescript 中的概念

## 分发

先上 demo

```ts
type GetSomeType<T extends string | number> = T extends string ? "a" : "b";

let one: GetSomeType<string>;
// 'a'

let two: GetSomeType<number>;
// 'b'

let

typescript学习-高级概念

转载自: https://yunsong0922.github.io/2018/12/09/微内核架构应用研究/

**微内核架构（Microkernel Architecture）也叫 Plugin Architecture，是一种基于插件的架构方式，通过编写精简的微内核来支撑以 plugin 的方式来添加更多丰富的功能**。微内核架构在我们常用的应用和框架里面非常常见，比如工具有 Intel

「转」微内核架构应用研究

学习<a href="mailto:&#x77;&#x65;&#x62;&#112;&#x61;&#x63;&#x6b;&#x40;&#53;&#46;&#x37;&#x33;&#46;&#48;">&#x77;&#x65;&#x62;&#112;&#x61;&#x63;&#x6b;&#x40;&#53;&#46;&#x37;&#x33;&#46;&#48;</a>的 ModuleFederation

 <h2>
 
 WHAT
 
 </h2>
 webpack 提供的一种跨项目模块共享机制
先通过一个 🌰 了解一下
<img src="/img/webpack-mf-0.png" alt="webpack ModuleFederation">
如图所示，分别创建了两个项目 <code>host</code> 和 <code>remote</code>
<ul>
<li><code>remote</code> 中创建了两个组件 <code>Button</code> 和 <code>Header</code></li>
<li><code>host</code> 中的 <code>bootstrap.jsx</code> 引用了两个组件 (注意，这两个组件在 <code>host</code> 项目中并未定义)</li>
</ul>
分别在两个项目下执行 <code>npx webpack serve</code> ，然后访问 <code>host</code> 的开发地址 <code>http://localhost:8080/</code> 效果如图所示，接着尝试修改 <code>remote</code> 中的 <code>components/Header.jsx</code> 发现页面中也相应发生变化
🤔
也就是说，我们在 <code>host</code> 中引用了 <code>remote</code> 中的组件？😱
对的，这就是 webpack5 提供的新特性 ModuleFederation ，中文直译模块联邦
联邦模块有两个主要概念： <code>host</code> （消费其他 <code>remote</code> ）和 <code>remote</code> （被 <code>host</code> 消费）。 每个项目可以是 <code>host</code> 也可以是 <code>remote</code> ，也可以两个都是。可以通过 webpack 配置来区分，可以参考上述的例子
<ul>
<li>作为 <code>host</code> 需要配置 <code>remotes</code> 列表
</li>
<li>作为 <code>remote</code> 需要配置项目名（ <code>name</code> ），打包后的文件名（ <code>filename</code> ），提供的模块（ <code>exposes</code> ）
</li>
</ul>
而且想要开启这一特性，只需要少许的配置即可
在需要共享的项目中，即上述的 <code>remote</code> 中，添加这个 webpack 配置
<pre><code class="hljs language-js">const { ModuleFederationPlugin } = require(&quot;webpack&quot;).container;

module.exports = {
 plugins: [
 // ...
 new ModuleFederationPlugin({
 // 当前应用的名字，全局唯一ID，通过 name/{expose} 的方式使用
 name: &quot;remote&quot;,
 // *可选，打包方式，与 name 保持一致即可
 library: { type: &quot;var&quot;, name: &quot;remote&quot; },
 // 共享组件/模块打包后所在的文件，使用者直接导入这个文件即可
 filename: &quot;remoteEntry.js&quot;,
 exposes: {
 // 这里便是我们要共享的模块/组件，引用方式为 import(name/{expose})，比如 import(&#x27;remote/Button&#x27;)
 &quot;./Button&quot;: &quot;./src/components/Button.jsx&quot;,
 &quot;./Header&quot;: &quot;./src/components/Header.jsx&quot;,
 },
 // 在这里指定需要共享的package
 shared: {
 react: { singleton: true, requiredVersion: &quot;^18.1.0&quot; },
 &quot;react-dom&quot;: { singleton: true, requiredVersion: &quot;^18.1.0&quot; },
 },
 }),
 ],
};
</code></pre>
同时，在需要引用这些组件的项目中，即上述的<code>host</code>项目，webpack 配置文件中新增这些配置
<pre><code class="hljs language-js">const { ModuleFederationPlugin } = require(&quot;webpack&quot;).container;

module.exports = {
 plugins: [
 new ModuleFederationPlugin({
 name: &quot;host&quot;,
 // 表示当前应用是一个 Host，可以引用 remote 中 expose 的模块
 remotes: {
 remote: &quot;remote@http://localhost:8081/remoteEntry.js&quot;,
 },
 // 在这里指定需要共享的package
 // 在使用 Module Federation 时，Host、Remote 必须配置一致的 shared 这样才会生效
 shared: {
 react: { singleton: true, requiredVersion: &quot;^18.1.0&quot; },
 &quot;react-dom&quot;: { singleton: true, requiredVersion: &quot;^18.1.0&quot; },
 },
 }),
 ],
};
</code></pre>
在这里，我们也可以简单得分析一下 host 应用加载的 js 文件
<img src="/img/webpack-mf-1.png" alt="webpack ModuleFederation配置shared的构建文件">
如图所示，在本示例中 host 加载了三个 remote 的文件<code>remoteEntry.js</code>和<code>src_components_Header_jsx.js</code>与<code>src_components_Button_jsx.js</code>，其中后两者是加载的组件代码，<code>remoteEntry.js</code>是入口文件，可以发现并没有加载 react 相关的源码，这是因为我们配置了<code>shared</code>，这样 remote 就可以和 host 共用一套 react（在这里，react 是被打包进<code>main.js</code>中）。如果没有配置<code>shared</code>选项，那么会单独加载一份 react 代码
<img src="/img/webpack-mf-2.png" alt="webpack ModuleFederation未配置shared的构建文件">
可以看到，这时会单独加载一份react源码

 <h2>
 
 WHY
 
 </h2>
 在构建工具层面上对模块共享、模块加载做一些扩展、优化

 <h2>
 
 HOW
 
 </h2>
 修改了 <code>webpack_require</code> 的部分实现，在 <code>require</code> 的时候从远程加载资源，缓存到全局对象 <code>window[&quot;webpackChunk&quot;+appName]</code> 中，然后合并到 <code>webpack_modules</code> 中
webpack 每次打包都会将资源全部包裹在一个立即执行函数里面，这样虽然避免了全局环境的污染，但也使得外部不能访问内部模块。 在这个立即执行函数里面，webpack 使用 <code>webpack_modules</code> 对象保存所有的模块代码，然后用内部定义的 <code>webpack_require</code> 方法从 <code>webpack_modules</code> 中加载模块。并且在异步加载和文件拆分两种情况下向全局暴露一个 <code>webpackChunk</code> 数组用于沟通多个 webpack 资源，这个数组通过被 webpack 重写 <code>push</code> 方法，会在其他资源向 <code>webpackChunk</code> 数组中新增内容时同步添加到 <code>webpack_modules</code> 中从而实现模块整合

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.zoo.team/article/webpack-modular">模块联邦浅析</a>
<a href="https://webpack.docschina.org/concepts/module-federation/#Uncaught-Error-Shared-module-is-not-available-for-eager-consumption">webpack 中文文档</a>
<a href="https://github.com/module-federation/module-federation-examples/tree/master/basic-host-remote">module-federation-examples/basic-host-remote</a>

学习webpack@5.73.0的 ModuleFederation

## WHAT

webpack 提供的一种跨项目模块共享机制

先通过一个 🌰 了解一下

![webpack ModuleFederation](/img/webpack-mf-0.png)

如图所示，分别创建了两个项目 `host` 和 `remote`

- `remote` 中创建了两个组件 `Button`

webpack学习-ModuleFederation

学习 webpack5 的构建流程

 <h2>
 
 构建的核心流程
 
 </h2>
 分为三步
<ol>
<li>初始化
</li>
<li>构建
</li>
<li>输出文件
</li>
</ol>

 <h3>
 
 初始化
 
 </h3>
 从配置文件、 shell 命令行中读取参数，与默认配置结合得出最终的配置，而后根据该配置创建出 compiler 对象并根据配置中的 entry 找出所有的入口文件，调用 compilation.addEntry 将入口文件转换为 dependence 对象，同时初始化编译环境（包括注入插件、注册各种模块等）

 <h3>
 
 构建
 
 </h3>
 根据初始化阶段创建的 dependence 创建 module 对象，调用合适的 loader 将 module 转为标准的 js 内容，接着调用 js 解释器将内容转为 ast 对象，从中找出该模块依赖的模块，创建 dependence，而后递归此过程，直到所有入口依赖的文件都经过了本步骤的处理
在经过递归处理所有能触达到的模块后，得到了每个模块被翻译后的内容以及它们之间的依赖关系图

 <h3>
 
 输出文件
 
 </h3>
 主要完成 module 到 chunk 的转化
根据入口和模块之间的依赖关系，组装成一个个包含多个 module 的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，最后根据配置好的输出路径和文件名将文件内容写入到文件系统中
chunk 分包规则：
<ul>
<li>同一个 <code>entry</code> 下可触达的模块组织成一个 chunk
</li>
<li>异步模块单独划分为一个 chunk
</li>
<li><code>entry.runtime</code>单独划分为一个 chunk
</li>
</ul>

 <h2>
 
 资源形态流转
 
 </h2>
 如图
<img src="/img/webpack-core-0.png" alt="webpack 资源形态流转">
从 entry 文件开始，将其转为 dependence ，而后雕工对应的工厂函数创建 module 对象，之后读取 module 对应的文件内容，将其解析为 ast ，如果该文件有其他依赖，则重复此步骤。至此，所有的文件均为转化为 module
接着，遍历 module 集合，按照内置的分包规则将不同的 module 整合到一个 chunk 中；遍历 chunk 集合，将其转为 assets 集合
最后，将 assets 写入文件系统

 <h2>
 
 loader 与 plugin
 
 </h2>
 plugin 从代码上看是一个带有 apply 函数的 class 。 webpack 会在特定的时机触发钩子，并会附带上足够的上下文信息，插件定义的钩子回调中，可以与这些上下文背后的数据结构、接口交互产生 side effect，进而影响到编译状态和后续流程
loader 从代码上看是一个函数，接收特定的参数（源代码等），经过转换后返回一个js解释器可以解析的内容

 <h2>
 
 参考
 
 </h2>
 <a href="https://mp.weixin.qq.com/s/SbJNbSVzSPSKBe2YStn2Zw">[万字总结] 一文吃透 Webpack 核心原理</a>

学习 webpack5 的构建流程

## 构建的核心流程

分为三步

1. 初始化

2. 构建

3. 输出文件

### 初始化

从配置文件、 shell 命令行中读取参数，与默认配置结合得出最终的配置，而后根据该配置创建出 compiler 对象并根据配置中的 entry 找出所有的入口文件，调用 compilation.addEntry 将入口文件转换为 dependence 对象

webpack学习-构建流程

学习 webpack5 中 chunk 分包规则

 <h2>
 
 module vs chunk
 
 </h2>
 在 webpack 中，原始的资源模块以 Module 对象形式存在、流转、解析处理。而 Chunk 则是输出产物的基本组织单位，在生成阶段 webpack 按规则将 entry 及其它 Module 插入 Chunk 中，之后再由 SplitChunksPlugin 插件根据优化规则与 ChunkGraph 对 Chunk 做一系列的变化、拆解、合并操作，重新组织成一批性能(可能)更高的 Chunks 。运行完毕之后 webpack 继续将 chunk 一一写入物理文件中，完成编译工作。
综上，Module 主要作用在 webpack 编译过程的前半段，解决原始资源“「如何读」”的问题；而 Chunk 对象则主要作用在编译的后半段，解决编译产物“「如何写」”的问题，两者合作搭建起 webpack 搭建主流程。

 <h2>
 
 默认分包规则
 
 </h2>
 简单总结下:
<ul>
<li>同一个 <code>entry</code> 下可触达的模块组织成一个 chunk
</li>
<li>异步模块单独划分为一个 chunk
</li>
<li><code>entry.runtime</code>单独划分为一个 chunk
</li>
</ul>

 <h3>
 
 entry
 
 </h3>
 seal 阶段遍历 entry 对象，为每一个 entry 单独生成 chunk，之后再根据模块依赖图将 entry 触达到的所有模块打包进 chunk 中。
对于如下打包配置和文件依赖
<pre><code class="hljs language-js">module.exports = {
 mode: &quot;development&quot;,
 entry: {
 index: &quot;./src/chunk/index.js&quot;,
 main: &quot;./src/chunk/main.js&quot;,
 },
 optimization: {
 usedExports: true,
 },
 devtool: false,
};
</code></pre>
<img src="/img/webpack-chunk-1.png" alt="webpack entry划分chunk-文件依赖">
在示例中， <code>index.js</code>和 <code>main.js</code> 分别静态引入了几个文件
在 <code>npx webpack --json &gt; info.json</code> 打包后的输出结果是这样的
<img src="/img/webpack-chunk-0.png" alt="webpack entry划分chunk-打包结果">
可以看到，一共生成了两个 chunk

 <h3>
 
 异步模块
 
 </h3>
 每次遇到异步模块都会为之创建单独的 Chunk 对象，单独打包异步模块。
还以上述配置和代码为例，只是将 <code>a.js</code> 改为动态引入，即<code>import(&#39;a.js&#39;)</code>
<img src="/img/webpack-chunk-2.png" alt="webpack 动态import分包">
此时重新执行<code>npx webpack --json &gt; info.json</code> 打包后的输出结果是这样的
<img src="/img/webpack-chunk-3.png" alt="webpack 动态import分包">
可以看到新增了一个 chunk

 <h3>
 
 entry.runtime
 
 </h3>
 Webpack 5 之后还能根据 entry.runtime 配置单独打包运行时代码。
除了 entry、异步模块外，webpack 5 之后还支持基于 runtime 的分包规则。除业务代码外，Webpack 编译产物中还需要包含一些用于支持 webpack 模块化、异步加载等特性的支撑性代码，这类代码在 webpack 中被统称为 runtime。虽然每段运行时代码可能都很小，但随着特性的增加，最终结果会越来越大，特别对于多 entry 应用，在每个入口都重复打包一份相似的运行时代码显得有点浪费，为此 webpack 5 专门提供了 entry.runtime 配置项用于声明如何打包运行时代码。用法上只需在 entry 项中增加字符串形式的 runtime 值，例如：
<pre><code class="hljs language-js">module.exports = {
 mode: &quot;development&quot;,
 entry: {
 index: {
 import: &quot;./src/chunk/index.js&quot;,
 runtime: &quot;solid-runtime&quot;,
 },
 main: {
 import: &quot;./src/chunk/main.js&quot;,
 runtime: &quot;solid-runtime&quot;,
 },
 },
 optimization: {
 usedExports: true,
 },
 devtool: false,
};
</code></pre>
此时再次执行 <code>npx webpack --json &gt; info.json</code>，打包结果如下
<img src="/img/webpack-chunk-4.png" alt="webpack runtime分包">
可以看到，此时又新增了一个包，而且对比一下输出文件的大小，大部分文件输出到 <code>solid-runtime.js</code> 中， <code>index.js</code> 和 <code>main.js</code> 已经缩短到 30 行左右
<blockquote>
ps: 此时网站中需要单独引入 solid-runtime.js 文件
</blockquote>

 <h2>
 
 SplitChunk
 
 </h2>
 // TODO

 <h2>
 
 参考
 
 </h2>
 <a href="https://mp.weixin.qq.com/s?__biz=Mzg3OTYwMjcxMA==&amp;mid=2247484029&amp;idx=1&amp;sn=7862737524e799c5eaf1605325171e32&amp;chksm=cf00bf04f8773612682f4650be2f78255912d0ca8ecafff1bd647a8a692ae28098436975908f&amp;scene=178&amp;cur_album_id=1856066636768722949#rd">有点难的知识点： Webpack Chunk 分包规则详解</a>

学习 webpack5 中 chunk 分包规则

## module vs chunk

在 webpack 中，原始的资源模块以 Module 对象形式存在、流转、解析处理。而 Chunk 则是输出产物的基本组织单位，在生成阶段 webpack 按规则将 entry 及其它 Module 插入 Chunk 中，之后再由 SplitChunksPlugin 插件根据优化规则与 ChunkGra

webpack学习-chunk分包

学习 webpack5 中 tree shaking 原理

 <h2>
 
 WHAT
 
 </h2>
 一种优化技术
使用方式：
<ol>
<li>使用 ESM 编写代码
</li>
<li>启用标记功能。配置 webpack 的 <code>optimization.useExports = true</code>
</li>
<li>启用清除功能。有多种配置方式
</li>
</ol>
<ul>
<li>配置 <code>mode = production</code></li>
<li>配置 <code>optimization.minimize = true</code></li>
<li>提供 <code>optimization.minimizer</code></li>
</ul>

 <h2>
 
 WHY
 
 </h2>
 减少打包文件体积，提升网站性能

 <h2>
 
 HOW
 
 </h2>
 基于 ESM，静态分析哪些模块没有被用到，借助于一些 DCI 工具，删除没用到的代码
过程分为两步
<ol>
<li>基于两个插件，标记没有用到的模块（代码）导出，并删除没用到的导出
</li>
<li>删除
</li>
</ol>

 <h3>
 
 标记
 
 </h3>
 其中标记过程又可分为三步，标记的效果就是删除没有被其它模块使用的导出语句，但并没有删除源码
<ol>
<li>make 阶段</li>
</ol>
使用 <code>FlagDependencyExportsPlugin</code> 收集模块导出变量并记录到 <code>module.ExportInfo</code> 变量中
<ol start="2">
<li>seal 阶段</li>
</ol>
使用 <code>FlagDependencyUsagePlugin</code> 遍历 <code>module.ExportInfo</code> ，修改 <code>module.exportInfo._usedInRuntime</code> 记录使用到的变量
<ol start="3">
<li>生成阶段</li>
</ol>
若变量没有被其它模块使用则删除对应的导出语句，并打上标记
<img src="/img/webpack-tree-shaking-0.png" alt="webpack tree-shaking">

 <h3>
 
 删除
 
 </h3>
 将由 Terser、UglifyJS 等 DCE 工具“摇”掉这部分无效代码，构成完整的 Tree Shaking 操作

 <h2>
 
 总结
 
 </h2>
 综上所述，Webpack 中 Tree Shaking 的实现分为如下步骤：
<ol>
<li>在 <code>FlagDependencyExportsPlugin</code> 插件中根据模块的 <code>dependencies</code> 列表收集模块导出值，并记录到 ModuleGraph 体系的 <code>exportsInfo</code> 中
</li>
<li>在 <code>FlagDependencyUsagePlugin</code> 插件中收集模块的导出值的使用情况，并记录到 <code>exportInfo._usedInRuntime</code> 集合中
</li>
<li>在 <code>HarmonyExportXXXDependency.Template.apply</code> 方法中根据导出值的使用情况生成不同的导出语句
使用 DCE 工具删除 Dead Code，实现完整的树摇效果
</li>
</ol>

 <h2>
 
 参考
 
 </h2>
 <a href="https://mp.weixin.qq.com/s?__biz=Mzg3OTYwMjcxMA==&amp;mid=2247484579&amp;idx=1&amp;sn=f687adfc6a7ea155c0fdf504defb65b5&amp;chksm=cf00b9daf87730cc2bf7934f6fd40c50ad28ef4e418922740aedacc998f2fa62388d4c81649c&amp;scene=178&amp;cur_album_id=1856066636953272321#rd">Webpack 原理系列九：Tree-Shaking 实现原理</a>

学习 webpack5 中 tree shaking 原理

## WHAT

一种优化技术

使用方式：

1. 使用 ESM 编写代码

2. 启用标记功能。配置 webpack 的 `optimization.useExports = true`

3. 启用清除功能。有多种配置方式

- 配置 `mode = production`
- 配置 `optimization.minimize

webpack学习-tree shaking

<h2>
 
 WHAT
 
 </h2>
 HMR: (hot module replacement)热模块替换/模块热替换，见名思意，即无需刷新在内存环境中即可替换掉过旧模块。与 Live Reload 相对应
<blockquote>
PS: Live Reload，当代码进行更新后，在浏览器自动刷新以获取最新前端代码
</blockquote>
<code>*.css</code>: 可以使用 HMR 功能，因为<code>style-loader</code>内部实现了
<code>*.js</code>: 默认不能使用 HMR 功能 --&gt; 需要修改 js 代码，添加支持 HMR 功能的代码
注意: HMR 功能对<code>js</code>的处理，只能处理非入口<code>js</code>文件的其他文件
<pre><code class="hljs language-js">// js文件开启HMR
if (module.hot) {
 // 需要检测的文件
 module.hot.accept(&quot;path/to/HMRFile.js&quot;, () =&gt; {
 /*
 * HMRFile文件关键逻辑
 */
 });

 // 或者简单得传个空函数
 module.hot.accept(() =&gt; {});
}
</code></pre>

 <h2>
 
 WHY
 
 </h2>
 一个模块发生变化，只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度

 <h2>
 
 HOW
 
 </h2>
 
 <h3>
 
 关于 chunk 和 module
 
 </h3>
 chunk 就是若干 module 打成的包，一个 chunk 应该包括多个 module，一般来说最终会形成一个 file。而 js 以外的资源，webpack 会通过各种 loader 转化成一个 module，这个模块会被打包到某个 chunk 中，并不会形成一个单独的 chunk。

 <h3>
 
 关于 HMR 和 webpack-dev-server, webpack-hot-middleware, webpack-dev-middleware 之间的关系
 
 </h3>
 <code>webpack-dev-server</code> 实现了封装好的的 HMR，除了配置文件和命令行参数外，较难定制开发
<code>webpack-hot-middleware</code> / <code>webpack-dev-middleware</code> 可搭配服务端框架实现个性化的 HMR 服务
两者的区别在于
<ol>
<li><code>webpack-dev-server</code> 使用 websocket 来作为客户端/服务端之间的通信方式，后者使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource">EventSource</a>
</li>
<li>通信过程中使用的事件名不同。前者使用 <code>hash</code> 和 <code>ok</code> ，后者使用 <code>build</code> 和 <code>sync</code>
</li>
</ol>

 <h3>
 
 HMR原理
 
 </h3>
 webpack-dev-server hmr流程图
<img src="/img/webpack-hmr-0.jpeg" alt="webpack-dev-server hmr流程图">
在<code>webpack的</code>运行时使用<code>__webpack__modules__</code>维护所有的模块
而热模块替换的原理，即通过<code>chunk</code>的方式加载最新的<code>modules</code>，找到<code>__webpack__modules__</code>中对应的模块逐一替换，并删除其上下缓存。
其精简数据结构用以下代码表示:
<pre><code class="hljs language-js">// webpack 运行时代码
const __webpack_modules = [
 (module, exports, __webpack_require__) =&gt; {
 __webpack_require__(0);
 },
 () =&gt; {
 console.log(&quot;这是一号模块&quot;);
 },
];

// HMR Chunk 代码
// JSONP 异步加载的所需要更新的 modules，并在 __webpack_modules__ 中进行替换
self[&quot;webpackHotUpdate&quot;](0, {
 1: () =&gt; {
 console.log(&quot;这是最新的一号模块&quot;);
 },
});
</code></pre>
其下为更具体更完整的流程，每一步都涉及众多，有兴趣的可阅读<code>webpack-dev-server</code>及开发环境<code>webpack</code>运行时的源码。
<ol>
<li><code>webpack-dev-server</code>将打包输出<code>bundle</code>使用内存型文件系统控制，而非真实的文件系统。此时使用的是<a href="https://github.com/webpack/memory-fs">memory-fs</a>模拟 node.js fs API
</li>
<li>每当文件发生变更时，<code>webpack</code>将会重新编译，<code>webpack-dev-server</code>将会监控到此时文件变更事件，并找到其对应的<code>module</code>。此时使用的是<a href="https://github.com/paulmillr/chokidar">chokidar</a>监控文件变更
</li>
<li><code>webpack-dev-server</code>将会把变更模块通知到浏览器端，此时使用<code>websocket</code>与浏览器进行交流。此时使用的是<a href="https://github.com/websockets/ws">ws</a>
</li>
<li>浏览器根据<code>websocket</code>接收到<code>hash</code>，并通过<code>hash</code>以<a href="https://en.wikipedia.org/wiki/JSONP">JSONP</a>的方式请求更新模块的<code>chunk</code>
</li>
<li>浏览器加载<code>chunk</code>，并使用新的模块对旧模块进行热替换，并删除其缓存
</li>
</ol>

 <h2>
 
 各大框架中的 HMR
 
 </h2>
 <ul>
<li>react, <a href="https://github.com/facebook/react/blob/main/packages/react-refresh/README.md">react-refresh</a>
</li>
<li>vue, <a href="https://www.npmjs.com/package/vue-loader">vue-loader</a>
</li>
</ul>

 <h2>
 
 参考
 
 </h2>
 <a href="https://github.com/shfshanyue/Daily-Question/issues/79">【Q078】webpack 中什么是 HMR，原理是什么 #79</a>

## WHAT

HMR: (hot module replacement)热模块替换/模块热替换，见名思意，即无需刷新在内存环境中即可替换掉过旧模块。与 Live Reload 相对应

> PS: Live Reload，当代码进行更新后，在浏览器自动刷新以获取最新前端代码

`*.css`: 可以使用 HMR 功能，因为`style-loader`内部实现了

`*.js`: 默认不能使用

webpack学习-HMR

研究一下<code>webpack-dev-server</code>的 HMR 原理
基于 webpack5 单页应用构建流程分析

 <h2>
 
 如何使用
 
 </h2>
 在配置文件中添加
<pre><code class="hljs language-js">module.exports = {
 devServer: {
 hot: true,
 },
};
</code></pre>
后，即可启用<code>webpack-dev-server</code>的 HMR 功能，只是启用，还需要在业务代码中告诉<code>webpack-dev-server</code>如何更新代码
<pre><code class="hljs language-js">if (module.hot) {
 module.hot.accept([&quot;./content.js&quot;], () =&gt; {
 render();
 });
}
</code></pre>
这样，在<code>content.js</code>发生改变后，会执行回调函数，即重新<code>render</code>

 <h2>
 
 流程
 
 </h2>
 核心流程总结如下
包括<code>webpack-dev-server</code>和<code>webpack.HotModuleReplacementPlugin</code>
<ol>
<li><code>webpack-dev-server</code>会启动静态文件服务器，用于返回打包后的资源，该服务器使用<a href="https://github.com/webpack/memory-fs">memory-fs</a>模拟原生文件系统
</li>
<li><code>webpack-dev-server</code>会修改<code>entry</code>，将<code>webpack.HotModuleReplacementPlugin</code>的一些运行时代码注入到 chunk 中，并开启<code>webpack</code>的<code>watch</code>模式
</li>
<li>客户端请求文件后，会和<code>webpack-dev-server</code>建立一个<code>ws</code>服务
</li>
<li>文件发生变动后，<code>webpack-dev-server</code>会重新打包文件，生成两个额外文件：<code>chunkId.hash.hot-update.json</code>和<code>chunkId.hash.hot-update.js</code>，同时会通过<code>ws</code>向客户端发送消息，告知客户端有最新的代码
</li>
<li>客户端收到消息后先请求<code>chunkId.hash.hot-update.json</code>，然后通过返回值去请求<code>chunkId.hash.hot-update.js</code>
</li>
<li>增量更新客户端代码并重新执行<code>module.hot.accept</code>传递进来的回调函数
</li>
</ol>
其中<code>webpack-dev-server</code>和<code>webpack.HotModuleReplacementPlugin</code>分别完成的工作包括
<code>webpack-dev-server</code>:
<ul>
<li>启动一个<code>express</code>服务器，返回打包后的文件
</li>
<li>修改<code>compiler.outputFileSystem</code>为<code>memory-fs</code>
</li>
<li>建立一个<code>ws</code>服务
</li>
<li>修改<code>entry</code>文件，将一些代码添加到 chunk 中（和服务端建立<code>ws</code>，处理各种消息等）
</li>
</ul>
<code>webpack.HotModuleReplacementPlugin</code>:
<ul>
<li>代码变动后生成<code>chunkId.hash.hot-update.json</code>和<code>chunkId.hash.hot-update.js</code>
</li>
<li>请求新模块，热更代码等
</li>
</ul>

 <h2>
 
 原理
 
 </h2>
 将分为以下几个模块分析

 <h3>
 
 建立 HMR 服务
 
 </h3>
 创建一个 websocket 服务：在代码变动并编译完成后，向客户端发送两个消息<code>{ type: &quot;hash&quot;, data: &quot;xxx&quot; }</code>和<code>{ type: &quot;ok&quot; }</code>
<img src="/img/webpack-hmr-1.png" alt="hmr websocket消息">

 <h3>
 
 更新 compiler
 
 </h3>
 <code>webpack-dev-server</code>会更新配置文件中的<code>entry</code>，将<code>webpack-dev-server/lib/client.js</code>打包进 chunk 中
<code>webpack-dev-server/lib/client.js</code>会在客户端执行，并和 HMR Server 建立连接，接收消息

 <h3>
 
 注入运行时
 
 </h3>
 <code>webpack.HotModuleReplacementPlugin</code>会注入一些运行时代码
<img src="/img/webpack-hmr-2.png" alt="hmr 运行时">
此时，构建产物中即包含了所有运行 HMR 所需的客户端运行时与接口。这些 HMR 运行时会在浏览器执行一套基于 WebSocket 消息的时序框架，如图：
<img src="/img/webpack-hmr-3.png" alt="hmr 运行时">

 <h3>
 
 增量构建
 
 </h3>
 除注入客户端代码外，<code>webpack.HotModuleReplacementPlugin</code>还会在代码发生变动后生成两个文件<code>chunkId.hash.hot-update.json</code>和<code>chunkId.hash.hot-update.js</code>，稍后<code>webpack-dev-server</code>会向客户端发送<code>hash</code>和<code>ok</code>消息
<img src="/img/webpack-hmr-1.png" alt="hmr 运行时">

 <h3>
 
 应用更新
 
 </h3>
 客户端在接收到<code>webpack-dev-server</code>中<code>ws</code>服务发送的<code>hash</code>和<code>ok</code>消息后，会根据最新的<code>hash</code>获取<code>chunkId.hash.hot-update.json</code>文件，然后根据文件中提及到的<code>chunk</code>，再去请求<code>chunkId.hash-hot.update.js</code>
<img src="/img/webpack-hmr-4.png" alt="hmr 运行时">
注意，在 Webpack 4 及之前，热更新文件以模块为单位，即所有发生变化的模块都会生成对应的热更新文件； Webpack 5 之后热更新文件以 chunk 为单位，如上例中，main chunk 下任意文件的变化都只会生成 main.[hash].hot-update.js 更新文件。
<code>chunkId.hash-hot.update.js</code>拿到后会将代码更新到<code>__webpack_require__.c</code>中，并且执行<code>module.hot.accept</code>回调
至此，热更新完毕

研究一下`webpack-dev-server`的 HMR 原理

基于 webpack5 单页应用构建流程分析

## 如何使用

在配置文件中添加

```js
module.exports = {
  devServer: {
    hot: true,
  },
};
```

后，即可启用`webpack-dev-server`的 HMR 功能，只是启用，还需要在业务代码中告诉`we

webpack学习-HMR原理

<code>useContext</code>在 React 中主要作为<code>useState</code>的替代品，用于在复杂组件间传递数据，但需要稍加注意一些组件重复渲染问题
先说结论：由于<code>Context</code>的限制，每当<code>Context</code>中的数据发生变化时，通过<code>useContext</code>使用该<code>Context</code>的组件及其子组件都会触发重渲。对此，可通过拆分<code>Context</code>，减少<code>Context</code>的作用域，减少重渲的范围
下面会以一个简单的计数器作为示例

 <h2>
 
 一个简单的 🌰
 
 </h2>
 在这里，我们创建了一个<code>CounterContext</code>，全局共享了<code>state</code>和一些<code>action</code>，页面中<code>Header</code>组件和<code>Counter</code>组件中都使用了<code>CounterContext</code>来取值，而且<code>Header</code>和<code>Counter</code>分别有一个<code>Headerer</code>和<code>Counterer</code>子组件
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot; /&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;script
 src=&quot;https://cdn.jsdelivr.net/npm/react@18.1.0/umd/react.development.js&quot;
 crossorigin
 &gt;&lt;/script&gt;
 &lt;script
 src=&quot;https://cdn.jsdelivr.net/npm/react-dom@18.1.0/umd/react-dom.development.js&quot;
 crossorigin
 &gt;&lt;/script&gt;
 &lt;script src=&quot;https://unpkg.com/babel-standalone@6/babel.min.js&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;

 &lt;body&gt;
 &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
 &lt;script type=&quot;text/babel&quot;&gt;
 const {
 useContext,
 useReducer,
 createContext,
 useCallback,
 useState,
 memo,
 useMemo,
 } = React;

 const initialState = {
 count: 0,
 };

 const initialDispatch = {};

 const StateContext = createContext(initialState);

 const Store = ({ children }) =&gt; {
 const [state, setState] = useState({ count: 0 });

 const increment = useCallback(() =&gt; {
 setState((state) =&gt; ({
 ...state,
 count: state.count + 1,
 }));
 }, []);

 const decrement = useCallback(() =&gt; {
 setState((state) =&gt; ({
 ...state,
 count: state.count - 1,
 }));
 }, []);

 const value = useMemo(
 () =&gt; ({ state, decrement, increment }),
 [state, increment, decrement]
 );

 return (
 &lt;StateContext.Provider value={{ state, increment, decrement }}&gt;
 {children}
 &lt;/StateContext.Provider&gt;
 );
 };

 const Header = () =&gt; {
 const { state } = useContext(StateContext);

 console.log(&quot;rerender Header&quot;);

 return (
 &lt;div&gt;
 &lt;span&gt;{state.count}&lt;/span&gt;
 &lt;Headerer /&gt;
 &lt;/div&gt;
 );
 };

 const Counter = () =&gt; {
 const { increment, decrement } = useContext(StateContext);

 console.log(&quot;rerender Counter&quot;);

 return (
 &lt;div className=&quot;counter&quot;&gt;
 &lt;button onClick={increment}&gt;+&lt;/button&gt;
 &lt;button onClick={decrement}&gt;-&lt;/button&gt;
 &lt;Counterer /&gt;
 &lt;/div&gt;
 );
 };

 const Headerer = () =&gt; {
 console.log(&quot;rerender Headerer&quot;);

 return &lt;span&gt;Headerer&lt;/span&gt;;
 };

 const MHeaderer = memo(Headerer);

 const Counterer = () =&gt; {
 console.log(&quot;rerender Counterer&quot;);

 return &lt;span&gt;Counterer&lt;/span&gt;;
 };

 const App = () =&gt; (
 &lt;Store&gt;
 &lt;Header /&gt;
 &lt;Counter /&gt;
 &lt;/Store&gt;
 );

 const root = ReactDOM.createRoot(document.querySelector(&quot;#app&quot;));
 root.render(&lt;App /&gt;);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
组件结构是这样的
<img src="/img/use-context-o-0.png" alt="组件结构">
代码跑起来后页面显示正常，操作后数据也正常更新，但当我们打开控制台后，会发现打印的数据有点不正常
刷新页面，初次渲染时打印数据是正常的
<pre><code class="hljs language-sh">rerender Header
rerender Headerer
rerender Counter
rerender Counterer
</code></pre>
点击 ➕ 或 ➖ 后
<pre><code class="hljs language-sh">rerender Header
rerender Headerer
rerender Counter
rerender Counterer
# &lt;------点击按钮-------&gt;
rerender Header
rerender Headerer
rerender Counter
rerender Counterer
</code></pre>
发现<code>Header</code>和<code>Counter</code>及其子组件都触发更新了，好家伙，直呼好家伙
针对这个简单的 demo，我的<code>Counter</code>只是想用来渲染可更新数据的两个按钮，没必要重渲吧。我的<code>Headerer</code>和<code>Counterer</code>也只是想展示两个 UI，为啥也更新了
原因开头已经表述过了，但具体的解决方（代）案（码）是什么呢
<blockquote>
talk is cheap, show me the code
</blockquote>

 <h2>
 
 未使用到 Context 的
 
 </h2>
 对于像<code>Headerer</code>和<code>Counterer</code>这种没有直接使用到<code>Context</code>的，可通过寻常的解法：<code>memo</code>搞定
<pre><code class="hljs language-jsx">const MHeaderer = memo(Headerer);

const Header = () =&gt; {
 return (
 &lt;div&gt;
 &lt;MHeaderer /&gt;
 &lt;/div&gt;
 );
};
</code></pre>
这样当再次重渲时就会跳过<code>Headerer</code>和<code>Counterer</code>

 <h2>
 
 使用到 Context 的
 
 </h2>
 针对于像<code>Counter</code>这种直接使用到<code>Context</code>的，<code>memo</code>已经搞不定了，不过由于<code>state</code>和<code>setState</code>并不强制绑定，我们可通过将其拆分到两个<code>Context</code>来避免不必要的重渲，即：
分别创建两个<code>Context</code>，来将<code>state</code>和<code>setState</code>共享到全局
<pre><code class="hljs language-jsx">const StateContext = createContext(initialState);
const DispatchContext = createContext(initialDispatch);

const Store = ({ children }) =&gt; {
 const dispatch = useMemo(
 () =&gt; ({ decrement, increment }),
 [increment, decrement]
 );

 return (
 &lt;StateContext.Provider value={state}&gt;
 &lt;DispatchContext.Provider value={dispatch}&gt;
 {children}
 &lt;/DispatchContext.Provider&gt;
 &lt;/StateContext.Provider&gt;
 );
};
</code></pre>
在这里，<code>DispatchContext</code>的<code>value</code>必须使用<code>useMemo</code>缓存一下：<code>value</code>是一个对象，触发<code>state</code>更新后<code>Store</code>组件会重渲，如果不缓存，<code>value</code>也会改变，导致使用到<code>DispatchContext</code>的组件也会重渲，拆分了个寂寞。。。因此拆分后一定要记得打印一下日志，看有没有效果
此时的组件结构是这样的
<img src="/img/use-context-o-1.png" alt="优化后的useContext">
经过此番优化后，日志打印正常了
<pre><code class="hljs language-sh">rerender Header
rerender Headerer
rerender Counter
rerender Counterer
# &lt;------点击按钮-------&gt;
rerender Header
</code></pre>

 <h2>
 
 总结
 
 </h2>
 <ol>
<li>对于未直接使用到<code>Context</code>的，可通过<code>memo</code>等手段优化，避免不必要的重渲
</li>
<li>对于直接使用到<code>Context</code>的，可通过拆分<code>Context</code>优化
</li>
</ol>

`useContext`在 React 中主要作为`useState`的替代品，用于在复杂组件间传递数据，但需要稍加注意一些组件重复渲染问题

先说结论：由于`Context`的限制，每当`Context`中的数据发生变化时，通过`useContext`使用该`Context`的组件及其子组件都会触发重渲。对此，可通过拆分`Context`，减少`Context`的作用域，减少重渲的范围

下面

React.js学习-useContext性能优化

转载自: https://blog.csdn.net/qq_41257129/article/details/123371328

React 的迭代过程

React 从 v16 到 v18 主打的特性包括三个变化：

- v16: Async Mode (异步模式)
- v17: Concurrent Mode (并发模式)
- v18: Concurrent Render (并发更新)

React.js学习-一文梳理 React 18 新特性(转载)

大部分情况下不需要明确区分 <code>useEffect</code> 和 <code>useLayoutEffect</code>
（至少我还没遇到过 😂，不过有必要了解一下，没准哪天就遇到了）
两者唯一的区别在于执行时机的不同

 <h2>
 
 useEffect
 
 </h2>
 一般看来，对于 <code>useEffect</code> ，为了防止浏览器渲染卡顿，其回调函数会在浏览器 <code>paint</code> 之后执行，这看起来很正常，下面是一个正常的组件渲染流程：
<ol>
<li>做一些准备工作（渲染 <code>VDOM</code> 、调度 <code>effects</code> 等）
</li>
<li>React 将控制权交由浏览器以 <code>paint</code>
</li>
<li>执行 <code>useEffect</code> 回调
</li>
</ol>
确实，大部分情况下是这样，只不过凡事都有例外，且看官网的描述:
<blockquote>
虽然 <code>useEffect</code> 会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行。在开始新的更新前，React 总会先清除上一轮渲染的 <code>effect</code> 。
</blockquote>
官网的介绍会保证在任何新的渲染前执行，并没有说一定会在浏览器 <code>paint</code> 之后执行，因此是不是有一些场景 <code>effect</code> 会在 <code>paint</code> 之前执行？🤔
如果在 <code>useEffect</code> 的回调触发之前，React 组件又进行了一次状态更新，React 会先将之前的 Passive Effect 都处理掉。例如在 <code>useLayoutEffect</code> 中更新状态，在这种情况下，<code>useEffect</code>的回调 会在 paint 之前执行
<img src="https://blog.thoughtspile.tech/images/forced-le-flush-chart-5dc51705d5854315a6fa5e0be1464f7d.png" alt="useLayoutEffect-useEffect">

 <h2>
 
 useLayoutEffect
 
 </h2>
 和 <code>useEffect</code> 的唯一区别在于执行时机不同， <code>useLayoutEffect</code> 一定会保证回调函数会在 paint 之前执行，下面是一个正常的组件渲染流程：
<ol>
<li>做一些准备工作（渲染 <code>VDOM</code> 、调度 <code>effects</code> 等）
</li>
<li>执行 <code>useLayoutEffect</code> 回调
</li>
<li>React 将控制权交由浏览器以 <code>paint</code>
</li>
<li>执行 <code>useEffect</code> 回调
</li>
</ol>
这个区别的体现场景在于使用 useEffect 更新数据时，界面会闪烁一下
<pre><code class="hljs language-tsx">const { useState, useEffect, useLayoutEffect } = React;

const App = () =&gt; {
 const [value, setValue] = useState(-1);

 useEffect(() =&gt; {
 let i = 0;
 while (i &lt;= 900000000) {
 i++;
 }
 if (value === 0) {
 const tmp = Math.random() * 100;
 console.log(&quot;setValue&quot;, tmp);
 setValue(() =&gt; tmp);
 }
 }, [value]);

 console.log(&quot;render&quot;, value, Date.now());

 return &lt;div onClick={() =&gt; setValue(0)}&gt;{value}&lt;/div&gt;;
};
</code></pre>
可以看到有一个明显的闪烁
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/useEffect-%20blink.gif" alt="useEffect-blink">
改用 <code>useLayoutEffect</code> 后就不会出现这种情况了

大部分情况下不需要明确区分 `useEffect` 和 `useLayoutEffect`

（至少我还没遇到过 😂，不过有必要了解一下，没准哪天就遇到了）

两者唯一的区别在于执行时机的不同

## useEffect

一般看来，对于 `useEffect` ，为了防止浏览器渲染卡顿，其回调函数会在浏览器 `paint` 之后执行，这看起来很正常，下面是一个正常的组件渲染流程：

1. 做

React.js学习-useEffect vs useLayoutEffect

微前端是近两年比较火热的话题，从国外的 single-spa 到阿里的 qiankun，从京东的 micro-app 到欢聚时代的 emp ，各家大厂使尽浑身解数推出自家的微前端框架，那么微前端到底是什么呢

 <h2>
 
 什么是微前端
 
 </h2>
 网上看到一句话对其总结的鞭辟入里
<blockquote>
“微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体。”
</blockquote>
微前端的概念最早在 2016 年底被<a href="https://www.thoughtworks.com/radar/techniques/micro-frontends">提出</a>，微前端不是单纯的前端框架或者工具，而是一套架构体系，它将微服务的概念扩展到前端世界。在该技术架构下，新的/改造好之后的前端应用可由多个子应用构成，这些子应用间独立开发、独立部署、独立运行时、技术栈无关
微前端有如下特性：
<ol>
<li>技术栈无关
</li>
<li>独立开发/部署
</li>
<li>增量升级
</li>
</ol>
既然微前端这么好，为什么直到 16 年才被提出来呢
其实早在上古时代，<code>iframe</code>就可称为微前端，为什么这么说呢，因为<code>iframe</code>可以做到完美隔离 javascript/css ，并且可适用 url 快速接入。那既然这么简单，为啥没有流行起来呢（在微前端领域）？因为<code>iframe</code>缺点同样明显：隔离过于简单粗暴，导致应用间数据交互困难；整个应用全量加载，性能较差；弹窗类业务无法正常施展。。。

 <h2>
 
 为什么要做微前端
 
 </h2>
 微前端既可将多个应用/项目整合到一起，又可减小各应用间的耦合性，提高项目的可扩展性

 <h2>
 
 实现微前端有哪些方案
 
 </h2>
 从集成方式出发可以大致分为构建时集成、运行时集成

 <h3>
 
 构建时集成
 
 </h3>
 最常见的是将子应用独立开发为一个单独的可发布的 Javascript 包，在主应用中引用并加载。但是，这种方法意味着我们必须重新编译并发布每个微前端，才能发布对产品任何单个部分的更改

 <h3>
 
 运行时集成
 
 </h3>
 和构建时集成相反，在运行时动态加载各应用
最简单的事通过 nginx 来分发
<pre><code class="hljs language-html">&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot; /&gt;
 &lt;title&gt;Feed me&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Feed me&lt;/h1&gt;
 &lt;!--# include file=&quot;$PAGE.html&quot; --&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<pre><code class="hljs language-sh">server {
 listen 8080;
 server_name localhost;

 root /usr/share/nginx/html;
 index index.html;
 ssi on;

 # Redirect / to /browse
 rewrite ^/$ http://localhost:8080/browse redirect;

 # Decide which HTML fragment to insert based on the URL
 location /browse {
 set $PAGE &#x27;browse&#x27;;
 }
 location /order {
 set $PAGE &#x27;order&#x27;;
 }
 location /profile {
 set $PAGE &#x27;profile&#x27;
 }

 # All locations should render through index.html
 error_page 404 /index.html;
}
</code></pre>
这种方式也可勉强称为微前端，因为我们将每个业务都拆分到一个独立的应用中，可以交由独立的团队维护。除了这种服务端集成，在客户端也可以通过一定的手段拆分-集成
<pre><code class="hljs language-html">&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Feed me!&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Welcome to Feed me!&lt;/h1&gt;

 &lt;!-- These scripts don&#x27;t render anything immediately --&gt;
 &lt;!-- Instead they attach entry-point functions to `window` --&gt;
 &lt;script src=&quot;https://browse.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://order.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://profile.example.com/bundle.js&quot;&gt;&lt;/script&gt;

 &lt;div id=&quot;micro-frontend-root&quot;&gt;&lt;/div&gt;

 &lt;script type=&quot;text/javascript&quot;&gt;
 // These global functions are attached to window by the above scripts
 const microFrontendsByRoute = {
 &quot;/&quot;: window.renderBrowseRestaurants,
 &quot;/order-food&quot;: window.renderOrderFood,
 &quot;/user-profile&quot;: window.renderUserProfile,
 };
 const renderFunction = microFrontendsByRoute[window.location.pathname];

 // Having determined the entry-point function, we now call it,
 // giving it the ID of the element where it should render itself
 renderFunction(&quot;micro-frontend-root&quot;);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
在这里，我们将每个应用打包成一个 javascript 文件，在匹配到 URL 后执行对应的代码，渲染页面。
除了使用 javascript ，还可使用开篇提到的 iframe 集成，但 iframe 缺点过于明显就不讨论。此外，还可使用 web components 来实现，其也属于 javascript 因此不另列
<pre><code class="hljs language-html">&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Feed me!&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Welcome to Feed me!&lt;/h1&gt;

 &lt;!-- These scripts don&#x27;t render anything immediately --&gt;
 &lt;!-- Instead they each define a custom element type --&gt;
 &lt;script src=&quot;https://browse.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://order.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://profile.example.com/bundle.js&quot;&gt;&lt;/script&gt;

 &lt;div id=&quot;micro-frontend-root&quot;&gt;&lt;/div&gt;

 &lt;script type=&quot;text/javascript&quot;&gt;
 // These element types are defined by the above scripts
 const webComponentsByRoute = {
 &quot;/&quot;: &quot;micro-frontend-browse-restaurants&quot;,
 &quot;/order-food&quot;: &quot;micro-frontend-order-food&quot;,
 &quot;/user-profile&quot;: &quot;micro-frontend-user-profile&quot;,
 };
 const webComponentType = webComponentsByRoute[window.location.pathname];

 // Having determined the right web component custom element type,
 // we now create an instance of it and attach it to the document
 const root = document.getElementById(&quot;micro-frontend-root&quot;);
 const webComponent = document.createElement(webComponentType);
 root.appendChild(webComponent);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
除了这两种分类，还可从拆分粒度来分类

 <h3>
 
 基于路由分发
 
 </h3>
 上面介绍的基本都是一个页面一个应用，那么还有没有粒度更细一点的：想在一个页面加载多个应用？🤔

 <h3>
 
 前端微服务化
 
 </h3>
 每个前端应用都是独立的、自主运行的，最后通过模块化的方式组合出完整的前端应用
比如借助上面的 Web Components 实现
<pre><code class="hljs language-html">&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Feed me!&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Welcome to Feed me!&lt;/h1&gt;

 &lt;!-- These scripts don&#x27;t render anything immediately --&gt;
 &lt;!-- Instead they each define a custom element type --&gt;
 &lt;script src=&quot;https://browse.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://order.example.com/bundle.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://profile.example.com/bundle.js&quot;&gt;&lt;/script&gt;

 &lt;div id=&quot;micro-frontend-root&quot;&gt;
 &lt;micro-frontend-browse-restaurants /&gt;
 &lt;micro-frontend-order-food /&gt;
 &lt;micro-frontend-user-profile /&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
在这里，我们加载的 js 资源可以是任何借助框架构建后生成的 web component 组件文件

 <h2>
 
 总结
 
 </h2>
 微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体。
微前端技术方案可分为运行时集成/构建时集成，或者按照拆分粒度划分为路由分发式和微服务化

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.icode9.com/content-4-946879.html">详解微前端</a>

微前端是近两年比较火热的话题，从国外的 single-spa 到阿里的 qiankun，从京东的 micro-app 到欢聚时代的 emp ，各家大厂使尽浑身解数推出自家的微前端框架，那么微前端到底是什么呢

## 什么是微前端

网上看到一句话对其总结的鞭辟入里

> “微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体。”

微前端的概念最早在 2016 年底被[提出](ht

微前端-技术调研

<h1>
 
 什么是 hook
 
 </h1>
 组件自身能够通过某种机制再触发状态的变更并且引起re-render，而这种“机制”就是 Hooks！

 <h1>
 
 useEffect
 
 </h1>
 <ul>
<li>默认情况下，它在第一次渲染之后和每次更新之后都会执行。React 确保了每次运行<code>effect</code>的同时，DOM 都已经更新完毕
</li>
<li>每次重新渲染，都会生成新的<code>effect</code>，替换掉之前的。某种意义上讲，<code>effect</code>更像是渲染结果的一部分 —— 每个<code>effect</code> “属于”一次特定的渲染。
</li>
<li>每个<code>effect</code>都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。他们都属于<code>effect</code>的一部分
</li>
</ul>

 <h1>
 
 自定义 hook 的 state 是否共享
 
 </h1>
 在两个组件中使用相同的<code>hook</code>不会共享<code>state</code>，自定义<code>hook</code>是一种重用状态逻辑的机制，所以每次使用自定义<code>hook</code>时其中的所有<code>state</code>和副作用是完全隔离的

 <h1>
 
 hook 原理
 
 </h1>
 初次渲染的时候，按照 useState，useEffect 等 hook 的顺序，把 state，deps 等按顺序塞到 memoizedState 数组中。
更新的时候，按照顺序，从 memoizedState 中把上次记录的值拿出来。

 <h1>
 
 state 和 useState 的对应关系
 
 </h1>
 <code>React</code>靠<code>hook</code>的调用顺序来知道<code>state</code>和<code>useState</code>的对应关系，所以不能在条件/循环中调用<code>hook</code>

 <h1>
 
 useEffect 的执行时机
 
 </h1>
 <code>useEffect</code>会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行

 <h1>
 
 useCallback 和 useMemo
 
 </h1>
 <pre><code class="hljs language-js">useCallback(fn, deps) == useMemo(() =&gt; fn(), deps);
</code></pre>

 <h1>
 
 使用过多 hook 后性能问题
 
 </h1>
 hook 不会因为在渲染时创建函数而变慢，在现代浏览器中闭包和类的原始性能只有在极端场景下才会有明显的差别

 <h1>
 
 useState 惰性求值
 
 </h1>
 如果初始化<code>state</code>需要通过复杂计算获得，那么可以传入一个函数，在函数中计算并返回初始的<code>state</code>，此函数只在初始渲染时被调用
<pre><code class="hljs language-js">const [count, setCount] = useState(() =&gt; calState());
</code></pre>

 <h1>
 
 hook 使用必须要遵循的规则
 
 </h1>
 在函数值组件主体内（指 React 渲染阶段）改变<code>DOM</code>、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用<code>useEffect</code>完成副作用操作赋值给<code>useEffect</code>的函数会在组件渲染到屏幕后执行。

 <h1>
 
 useRef
 
 </h1>
 通过<code>useRef</code>来拥有一个在所有帧中共享的变量

 <h1>
 
 useReducer
 
 </h1>
 <ul>
<li>state 逻辑较复杂且包含多个子值
</li>
<li>下一个 state 依赖于之前的 state
</li>
</ul>

 <h1>
 
 useImperativeHandle
 
 </h1>
 简单来讲: useImperativeHandle 赋予函数式组件使用 ref 的特权, 通常和 forwardRef 成对出现,
使用方式:
<pre><code class="hljs language-jsx">const { useImperativeHandle, forwardRef, useRef } = React;

const Modal = forwardRef((props, ref) =&gt; {
 const open = () =&gt; {
 console.log(&quot;open&quot;);
 };
 useImperativeHandle(ref, () =&gt; ({
 open,
 }));

 return &lt;span&gt;modal&lt;/span&gt;;
});

const App = () =&gt; {
 const modalRef = useRef(null);

 return (
 &lt;div&gt;
 &lt;Modal ref={modalRef} /&gt;
 &lt;button onClick={() =&gt; modalRef.current.open()}&gt;click me&lt;/button&gt;
 &lt;/div&gt;
 );
};

const root = ReactDOM.createRoot(document.querySelector(&quot;#app&quot;));
root.render(&lt;App /&gt;);
</code></pre>

# 什么是 hook

组件自身能够通过某种机制再触发状态的变更并且引起**re-render**，而这种“机制”就是 Hooks！

# useEffect

- 默认情况下，它在第一次渲染之后和每次更新之后都会执行。React 确保了每次运行`effect`的同时，DOM 都已经更新完毕

- 每次重新渲染，都会生成新的`effect`，替换掉之前的。某种意义上讲，`effect`更像是渲染

React.js学习-使用内置hook

来源于一道面试题
请实现如下的函数：可以批量请求数据，所有的 URL 地址在 urls 参数中，同时可以通过 max 参数控制请求的并发度，当所有请求结束后，需要执行 callback 回调函数。发送请求的函数直接使用 fetch 即可
划出重点：请求数据、控制请求的并发度

 <h2>
 
 Promise.all
 
 </h2>
 第一眼想到 <code>Promise.all</code> 实现，于是开写，但写着写着发现不对劲，这样貌似不算并发，或者说没有达到要求的并发度控制: <code>Promise.all</code>只能在当前所有<code>promises</code>请求完毕后才能开启下一次请求，这样并不能吃满 <code>max</code> 并发度，需要变换策略

 <h2>
 
 闭包 + 循环 + 递归
 
 </h2>
 可以使用闭包+循环+递归来解决：循环控制并发度，递归来发送所有请求
<pre><code class="hljs language-js">const request = (...args) =&gt; fetch(...args).then((res) =&gt; res.json());
const minIn2 = (a, b) =&gt; (a &gt; b ? b : a);

const macAddresses = new Array(10)
 .fill(&quot;&quot;)
 .map((_, index) =&gt; `http://localhost:8080/${index}`);

function sendRequest(urls, max, callback) {
 const res = [];
 let i = 0;

 async function doRequest(url) {
 try {
 const r = await request(url);
 res.push(r);
 } catch (e) {
 res.push(e);
 } finally {
 if (res.length === urls.length) {
 callback(res);
 }
 if (i === urls.length) {
 return;
 }
 doRequest(urls[i++]);
 }
 }

 for (; i &lt; minIn2(max, urls.length); i += 1) {
 doRequest(urls[i]);
 }
}

sendRequest(macAddresses, 3, (res) =&gt; {
 console.log(res);
});
</code></pre>
这里面有个关键的变量<code>i</code>，该变量维护了当前完成到哪个请求
这个回答在面试时应该可以应付第一波攻势，但如果对方进一步发问，如果我的 urls 不是预先制定好的，我可以通过调用多次 <code>sendRequest</code> 来发送请求，那这应该怎么实现呢

 <h2>
 
 队列
 
 </h2>
 针对于进一步发问，这时候就没有那么简单了，因为我们同时还要维护所有urls，这样的话我们可以引入队列来解决，即：相较于上面的<code>i</code>，这里使用一个队列来维护当前完成到哪个请求
<ol>
<li>使用一个<code>queue</code>来保存所有的请求
</li>
<li>入队后立即出队
</li>
<li>在出队过程中先判断有没有达到最大并发度，如果有直接退出出队逻辑，若没有，则执行当前节点，完毕后继续出队即重复当前逻辑
</li>
</ol>
<pre><code class="hljs language-js">class Queue {
 constructor({ concurrency = 1, onCompleted } = {}) {
 this.queue = [];
 this.pendingPromises = [];
 this.concurrency = concurrency;
 this.onCompleted = onCompleted;
 }

 enqueue(promise) {
 return new Promise((resolve, reject) =&gt; {
 this.queue.push({
 promise,
 resolve,
 reject,
 });
 this.dequeue();
 });
 }

 dequeue() {
 if (this.pendingPromises.length === this.concurrency) {
 return;
 }

 const item = this.queue.shift();
 if (!item) {
 return;
 }

 try {
 this.pendingPromises.push(item.promise);
 item
 .promise()
 .then((value) =&gt; {
 this.pendingPromises.shift();
 item.resolve(value);
 this.dequeue();
 })
 .catch((e) =&gt; {
 this.pendingPromises.shift();
 item.reject(e);
 this.dequeue();
 });
 } catch (e) {
 this.pendingPromises.shift();
 item.reject(e);
 this.dequeue();
 }
 }
}
</code></pre>
该队列每个节点为一个返回 Promise 的函数，因此使用时需要注意一下
使用的话可以这样：
<pre><code class="hljs language-js">const request = (...args) =&gt; fetch(...args).then((res) =&gt; res.json());

const macAddresses = new Array(10)
 .fill(&quot;&quot;)
 .map((_, index) =&gt; `http://localhost:8080/${index}`);

const queue = new Queue({
 concurrency: 3,
 onCompleted: () =&gt; {
 console.log(&quot;completed&quot;);
 },
});

macAddresses.forEach((address) =&gt; {
 queue.enqueue(async () =&gt; {
 const res = await request(address);
 console.log(address, res);
 });
});
</code></pre>

 <h2>
 
 p-queue
 
 </h2>
 上面实现的 Queue 还不够完善，npm 上有个非常完善的库<a href="https://www.npmjs.com/package/p-queue">p-queue</a>

来源于一道面试题

_请实现如下的函数：可以批量请求数据，所有的 URL 地址在 urls 参数中，同时可以通过 max 参数控制请求的并发度，当所有请求结束后，需要执行 callback 回调函数。发送请求的函数直接使用 fetch 即可_

划出重点：请求数据、控制请求的并发度

## Promise.all

第一眼想到 `Promise.all` 实现，于是开写，但写着写着发现不对劲，这

JavaScript-异步并发

在昨天，我们使用 Lit 重构了<code>Reply</code>组件
功能是完成了，不过最后总结的时候有些许吐槽，事后想起来貌似是自己使用姿势不对 🤔 ，因此今天基于 typescript + webpack + Lit 来重新开发，果然体验一下就上去了：
<ol>
<li>typescript。有了 typescript 的加持，少写了不少模版代码
</li>
<li>VS Code 插件。我们在上一篇处理中吐槽没有语法提示，今天发现 VS Code 有一个插件可以做到该功能，嗯，体验又高了一级
</li>
</ol>
接下来就开始介绍我的探索之旅

 <h2>
 
 配置开发环境
 
 </h2>
 主要是安装 package + 配置 webpack + 安装插件
<ol>
<li>安装必要的 package</li>
</ol>
<pre><code class="hljs language-json">{
 &quot;dependencies&quot;: {
 &quot;lit&quot;: &quot;^2.2.2&quot;,
 &quot;typescript&quot;: &quot;^4.6.3&quot;
 },
 &quot;devDependencies&quot;: {
 &quot;html-webpack-plugin&quot;: &quot;^5.5.0&quot;,
 &quot;ts-loader&quot;: &quot;^9.2.9&quot;,
 &quot;webpack&quot;: &quot;^5.72.0&quot;,
 &quot;webpack-cli&quot;: &quot;^4.9.2&quot;,
 &quot;webpack-dev-server&quot;: &quot;^4.8.1&quot;
 }
}
</code></pre>
<ol start="2">
<li>配置 webpack</li>
</ol>
<pre><code class="hljs language-js">const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);

module.exports = {
 mode: &quot;development&quot;,
 entry: &quot;./src/index.ts&quot;,
 module: {
 rules: [
 {
 test: /\.ts$/,
 use: [&quot;ts-loader&quot;],
 },
 ],
 },
 devtool: &quot;source-map&quot;,
 plugins: [new HtmlWebpackPlugin()],
};
</code></pre>
<ol start="3">
<li>添加启动命令</li>
</ol>
<pre><code class="hljs language-json">{
 &quot;scripts&quot;: {
 &quot;dev:lit&quot;: &quot;webpack serve&quot;
 }
}
</code></pre>
<ol start="4">
<li>安装 VS Code 插件</li>
</ol>
VS Code 插件栏中搜索lit-plugin，然后安装即可，安装好之后<code>html</code>和<code>css</code>里的代码就有高亮和语法提示了（没有的话重新打开文件试试，再不行就重启大法好），而且点击组件还可以跳转了
至此，开发环境配置完毕

 <h2>
 
 使用 typescript 重构代码
 
 </h2>
 俗话说得好，磨刀不误砍柴工，先规划好要做什么
<ol>
<li>重构 Reply 组件
</li>
<li>使用 typescript 开发
</li>
<li>使用 webpack 📦
</li>
</ol>
那么既然用到 webpack 了，那么我们就按照通常的项目来设计了
<pre><code class="hljs language-sh">.
├── package.json
├── src
│ ├── components
│ │ ├── Comment.ts # 评论组件
│ │ └── Reply.ts # 回复组件
│ └── index.ts # 入口文件，同时会创建一个App组件
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
</code></pre>
在这里，我们分别将不同的组件抽离到不同的文件中，这样逻辑更清晰，维护起来也更方便
好了，接下来开始编码
（代码和之前的差不多，我直接敲重点）
从 js 迁移到 ts 开始很方便快捷的，主要修改的逻辑包含下面几项
<ol>
<li>去除之前的<code>window.customElements.define(&#39;m-comment&#39;, Comment);</code>，在<code>class</code>最上面添加注解<code>@customElement(&quot;m-comment&quot;)</code>
</li>
<li>属性声明也可以使用注解了
</li>
</ol>
<pre><code class="hljs language-ts"> @property({ type: String })
 avatar = &#x27;&#x27;
</code></pre>
<ol start="3">
<li>组件中的<code>this.shadowRoot.querySelector(&#39;#input&#39;)</code>需要修改一下</li>
</ol>
我们可以使用<code>!</code>来强制声明<code>this.shadowRoot</code>是一定存在的，或者添加一个<code>if</code>判断
<pre><code class="hljs language-ts">onSubmit() {
 const comment: HTMLInputElement|null = this.shadowRoot!.querySelector(&#x27;#input&#x27;);
 const res = this.dispatchEvent(new CustomEvent(&#x27;submit-comment&#x27;, {
 detail: comment!.value,
 }));
 comment!.value = &quot;&quot;;
 }
</code></pre>
<ol start="4">
<li>完成</li>
</ol>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/611ad4cbcda94373a63fb5b2b22bd715~tplv-k3u1fbpfcp-zoom-1.image" alt="lit-ts-js">
可以看到，有了 typescript 的加持，代码明显清爽许多，而且开发体验也更好了
完整代码在<a href="https://github.com/mrrs878/web-components">这里</a>

 <h2>
 
 总结
 
 </h2>
 typescript 牛逼，开发插件的大佬牛逼

 <h2>
 
 参考
 
 </h2>
 <a href="https://lit.dev/docs/">Lit</a>

在昨天，我们使用 Lit 重构了`Reply`组件

功能是完成了，不过最后总结的时候有些许吐槽，事后想起来貌似是自己使用姿势不对 🤔 ，因此今天基于 typescript + webpack + Lit 来重新开发，果然体验一下就上去了：

1. typescript。有了 typescript 的加持，少写了不少模版代码

2. VS Code 插件。我们在上一篇处理中吐槽没有语法提示，今

Web Component-Lit-2

在前几篇中，我们基于原生的 Web Components 开发了一个<code>Reply</code>组件，大概长这样
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fa68a485f5242f5b5e1eb75dfc801c1~tplv-k3u1fbpfcp-zoom-1.image" alt="web component reply">
功能是完成了，不过这些都是裸用 Web Components，有不少缺陷：
<ol>
<li>性能问题。由于我们没有任何 dom diff 的操作，接收到数据后直接渲染一个节点及其子节点，过于简单粗暴
</li>
<li>数据传输问题。我们在上一篇处理数据中提到使用<code>property</code>来处理父子组件交互问题，但这样就没法给子组件传递初始属性
</li>
<li>效率。可以看到，仅仅是一个简单的<code>Reply</code>组件，就写了很多琐碎的 dom 操作，如果组件复杂一点，代码量肯定会激增
</li>
<li>and so on
</li>
</ol>
好在现在有一个库，可以帮助我们解决这些基础问题，使得我们可以专注于处理业务需求
<a href="https://lit.dev/">Lit</a>

 <h2>
 
 Lit 是什么
 
 </h2>
 <blockquote>
Lit is a simple library for building fast, lightweight web components.
</blockquote>
奥，用来创建 Web Components 的一个库
官网上非常醒目地表达出其特点：Simple、Fast、Web Components，而且还对这三个特点做了说明
Simple：基于原生 Web Components，添加了一些响应式、声明式模版语法和其它一些特性
Fast：构建后体积非常小，5KB，而且没有虚拟DOM\增量更新
Web Components：基于原生 Web Components，可以和各种框架、平台无缝衔接
看起来还是挺有意思的，可以试用一下
这是官网给出的示例
<pre><code class="hljs language-jsx">import { html, css, LitElement } from &quot;lit&quot;;
import { customElement, property } from &quot;lit/decorators.js&quot;;

@customElement(&quot;simple-greeting&quot;)
export class SimpleGreeting extends LitElement {
 static styles = css`
 p {
 color: blue;
 }
 `;

 @property()
 name = &quot;Somebody&quot;;

 render() {
 return html`&lt;p&gt;Hello, ${this.name}!&lt;/p&gt;`;
 }
}

&lt;simple-greeting name=&quot;World&quot;&gt;&lt;/simple-greeting&gt;;
</code></pre>
开起来还是挺简单的，那么就先试用一下，使用 Lit 来重构 Reply 组件

 <h2>
 
 使用 Lit 重构 Reply 组件
 
 </h2>
 配置开发环境的过程就略过了，直接进入编码环节
先将目光移到上述的示例，该示例创建了一个<code>simple-greeting</code>组件
首先，使用<code>customElement</code>注解，定义了一个组件<code>simple-greeting</code>，这个对标<code>customElements.define</code>
接着，使用<code>css</code>函数创建样式，这个对标<code>template&gt;style</code>
然后，使用<code>property</code>声明了一个属性，这个对标原生的<code>setAttribute/getAttribute</code>
最后，使用<code>html</code>函数创建了一个 dom 模版
按照上面的步骤，可以很简单地修改我们的代码
<pre><code class="hljs language-jsx">import {
 LitElement,
 css,
 html,
} from &quot;https://cdn.jsdelivr.net/gh/lit/dist@2.2.2/all/lit-all.min.js&quot;;

class Reply extends LitElement {
 static styles = css``;

 static properties = {
 placeholder: { type: String },
 };

 constructor() {
 super();
 this.avatar = &quot;https://joeschmoe.io/api/v1/random&quot;;
 }

 onSubmit() {
 const comment = this.shadowRoot.querySelector(&quot;#input&quot;);
 const res = this.dispatchEvent(new CustomEvent(&quot;submit-comment&quot;));
 }

 render() {
 return html`
 &lt;div class=&quot;reply-c&quot;&gt;
 &lt;div class=&quot;comments-c&quot; id=&quot;commentsContainer&quot;&gt;
 ${this.comments.map(
 (comment) =&gt;
 html`
 &lt;m-comment
 .avatar=&quot;${comment.avatar}&quot;
 .nickName=&quot;${comment.nickName}&quot;
 .comment=&quot;${comment.comment}&quot;
 /&gt;
 `
 )}
 &lt;/div&gt;
 &lt;/div&gt;
 `;
 }
}
</code></pre>
可以看到，我们代码里已经没有监听<code>comments</code>的逻辑，Lit 会帮我们做监听，变化时自动重渲
总体改造起来还是挺顺利的，有点 React + Vue 组合起来的感觉，只是在<code>App</code>里向<code>Reply</code>组件传递<code>comments</code>属性时耗费点时间，由于没看清官网的文档，一直使用的是<code>&lt;m-reply comments=${comments} /&gt;</code>来传递，导致<code>Reply</code>组件一直接受不到值，最后翻看官网的示例，发现传递复杂类型的值时需要在前面加一个<code>.</code>（有点坑，整个改造时间有将近一半时间卡在这里 😭）
开发体验一般，欠缺一些没有语法提示和高亮
完整代码在<a href="https://github.com/mrrs878/web-components/blob/main/reply-lit.html">这里</a>（在这里，为了更进一步体现组件化的思想，我们创建了三个组件<code>App</code>、<code>Reply</code>、<code>Comment</code>。<code>App</code>是根组件，用来创建页面，并将之前的<code>Reply</code>组件拆分为<code>Reply</code> + <code>Comment</code>）

 <h2>
 
 总结
 
 </h2>
 使用起来有利有弊，性能较裸写肯定有提升，但开发体验还待提高，值得尝试一下

 <h2>
 
 参考
 
 </h2>
 <a href="https://lit.dev/docs/">Lit</a>

在前几篇中，我们基于原生的 Web Components 开发了一个`Reply`组件，大概长这样

![web component reply](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fa68a485f5242f5b5e1eb75dfc801c1~tplv-k3u1fbpfcp-zoom-1.image)

功能是完成了，不过这些

Web Component-Lit

在前一篇中，我们开发了一个<code>Reply</code>组件，大概长这样
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fa68a485f5242f5b5e1eb75dfc801c1~tplv-k3u1fbpfcp-zoom-1.image" alt="web component reply">
功能是完成了，不过今天浏览看到一篇文章<a href="https://itnext.io/handling-data-with-web-components-9e7e4a452e6e">Handling data with Web Components</a>，大概是介绍了 Web Component 中数据交互的几种方式，有不少收获，特此总结记录一下

 <h2>
 
 attribute VS property
 
 </h2>
 首先是<code>attribute</code>和<code>property</code>，我们之前的代码中使用的是<code>attribute</code>来将<code>comments</code>传递到组件中，组件拿到后开始渲染数据。这种方案有一个弊端：<code>attribute</code>只接收字符串类型的数据，由于<code>comments</code>是一个数组类型，因此我们在传递之前需要使用<code>JSON.stringify</code>一下以及使用数据时需要<code>JSON.parse</code>一下，使用起来有一些不够方便
<pre><code class="hljs language-js">// 更新comments时需要处理成字符串
reply.setAttribute(&quot;comments&quot;, JSON.stringify(comments));

// 使用时需要解析成数组
if (name === &quot;comments&quot;) {
 this.renderComments(JSON.parse(newValue));
}
</code></pre>
那么有没有一种更好的方式来取代这种方式呢？有的，可以使用<code>property</code>来传递数据
<code>property</code>和<code>attribute</code>中文翻译过来意思很接近，但实际上是有不小的区别
考虑下面这一行代码
<pre><code class="hljs language-html">&lt;input type=&quot;text&quot; value=&quot;Age:&quot; /&gt;
</code></pre>
<code>type</code>和<code>value</code>就是<code>input</code>标签的attribute
当浏览器编译完 HTML 代码，会生成与之对应的一个个 DOM 节点，每个 DOM 节点是一个对象，此时它又拥有很多property，例如<code>height</code>、<code>alt</code>、<code>checked</code>等
对于一个 DOM 节点对象来讲，<code>property</code>就是这个对象上的属性；<code>attribute</code>是该对象对应的 HTML 标签元素上的属性
<code>property</code>和<code>attribute</code>大致上一一对应，但也有些特例，比如上述<code>input</code>标签的<code>value</code>。DOM 节点对象上的<code>value</code>会在输入之后发生变化，假如用户输入的是<code>John</code>，那么此时<code>Input.value</code>的返回值是<code>John</code>，而<code>Input.getAttribute(&#39;value&#39;)</code>的返回值则是<code>Name:</code>。此外还有其他的一些特例，感兴趣的可以去这里<a href="https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6004028#6004028">What is the difference between properties and attributes in HTML</a>看看原文
既然<code>property</code>是对象上的一个属性，那个肯定也可以给它赋一个对象类型的值！接下来就使用<code>property</code>来重构<code>Reply</code>组件

 <h2>
 
 使用 property 重构组件
 
 </h2>
 其实修改起来非常方便，代码改动还是比较少的
首先是最下面给组件更新值的代码需要变动：不再使用<code>setAttribute</code>，而是直接设置<code>comments</code>属性
<pre><code class="hljs language-js">reply.setAttribute(&quot;comments&quot;, JSON.stringify(comments));

// 修改为 ⬇️

reply.comments = comments;
</code></pre>
其次，我们需要一对<code>getter</code>和<code>setter</code>来监听数据变化从而渲染新的值
<pre><code class="hljs language-js">class Reply extends HTMLElement {
 constructor() {
 // 在这里，我们使用_comments来保存comments数据
 this._comments = [];
 }
 get comments() {
 return this._comments;
 }

 set comments(newValue) {
 this._comments = newValue;
 this.renderComments(newValue);
 }
}
</code></pre>
同时，删除监听<code>comments</code>属性相关的代码，因为我们这个已经通过<code>setter</code>实现数据监听了
到这里，我们已经完成重构，实现组件的原本功能了
不过我们要更新一步！
既然我们都能传递数组进去了，那么在大胆点，可不可以传递一个函数呢？
当然可以！！！
我们可以直接在<code>reply</code>上挂载一个<code>onSubmitComment</code>函数，在<code>Reply</code>内部按钮点击时调用该回调，并将数据传递出来
<pre><code class="hljs language-js">// 直接在组件实例上挂载一个回调函数
reply.onSubmitComment = (e) =&gt; {
 comments.push({
 comment: e,
 nickName,
 avatar,
 });
 reply.comments = comments;
};

// 组件内部，点击按钮时调用该函数
submitBtn.addEventListener(&quot;click&quot;, () =&gt; {
 this.onSubmitComment?.(commentInput.value);
 commentInput.value = &quot;&quot;;
});
</code></pre>
芜湖～ 🎉
完整代码<a href="https://github.com/mrrs878/web-components/blob/main/reply-property.html">在这里</a>

 <h2>
 
 总结
 
 </h2>
 <code>attribute</code>只能传递字符串数据，<code>property</code>由于是 DOM 对象上的属性，因此可以传递诸如对象、函数等复杂类型的数据。
据此，我们可以使用<code>property</code>来将数据直接设置到组件实例上，组件内部新增一对<code>getter</code>和<code>setter</code>来接收数据，而且我们还可以直接在组件实例上挂载一个回调函数，在组件内部可以直接调用该回调。
此外在处理类似于<code>disable</code>这种类型的<code>attribute</code>时也可以使用<code>property</code>+<code>getter</code>和<code>setter</code>来实现布尔类型属性的设置
总之，<code>attribute</code>和<code>property</code>搭配使用将极大提高开发效率

 <h2>
 
 参考
 
 </h2>
 <a href="https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6004028#6004028">What is the difference between properties and attributes in HTML</a>
<a href="https://itnext.io/handling-data-with-web-components-9e7e4a452e6e"># Handling data with Web Components</a>

在前一篇中，我们开发了一个`Reply`组件，大概长这样

![web component reply](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fa68a485f5242f5b5e1eb75dfc801c1~tplv-k3u1fbpfcp-zoom-1.image)

功能是完成了，不过今天浏览看到一篇文章[Handling dat

Web Component-处理数据

经过前两天的学习，已经基本入门 Web Component ，那么就开始实战，开发第一个组件
不过在此之前，还要介绍另一个特性

 <h2>
 
 slot
 
 </h2>
 <blockquote>
slot 由其 name 属性标识，并且允许您在模板中定义占位符，当在标记中使用该元素时，该占位符可以填充所需的任何 HTML 标记片段。--MDN
</blockquote>
比如我们的<code>template</code>是这样的：在需要的地方放置一个指定<code>name</code>属性的<code>slot</code>
<pre><code class="hljs language-html">&lt;template id=&quot;mHeaderTemplate&quot;&gt;
 &lt;p&gt;&lt;slot name=&quot;my-text&quot;&gt;My default text&lt;/slot&gt;&lt;/p&gt;
&lt;/template&gt;
</code></pre>
在使用的时候，可以这样玩：给元素设置一个<code>slot</code>属性，值为<code>template</code>里<code>slot</code>的<code>name</code>
<pre><code class="hljs language-html">&lt;m-header id=&quot;mHeader&quot; title=&quot;hello&quot;&gt;
 &lt;span slot=&quot;my-text&quot;&gt;Let&#x27;s have some different text!&lt;/span&gt;
&lt;/m-header&gt;
</code></pre>
这样<code>span</code>会替换<code>template</code>里的<code>slot</code>。使用起来还是挺简单的
特性介绍完毕，接下来进行今天的主题：组件开发实战

 <h2>
 
 Reply 组件
 
 </h2>
 本次来复制 Ant Design 的 <code>Card</code> 组件
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/reply.png" alt="reply">
先观察组件
<ol>
<li>默认情况下有一个头像、输入框、提交按钮
</li>
<li>在输入值点击提交按钮后，输入框上方会出现每一条的评论，包括评论人头像、昵称、评论的内容
</li>
</ol>
针对上述功能，简单的实现思路（肯定有更好、更优雅的 😬）：
<ol>
<li><code>m-reply</code>为受控组件，只负责提交、渲染数据，因此需要一个<code>comments</code>属性，指代待渲染的评论
</li>
<li>在输入框输入数据后，点击提交，组件会向父组件发送一个消息（自定义事件），并将输入框的内容传递出去，因此父容器需要监听该事件，父组件在在处理好数据后更新<code>comments</code>，<code>m-reply</code>会自动渲染最新的数据
</li>
<li>对于<code>comments</code>，该属性是一个数组，每一项包含三项数据：评论内容<code>comment</code>、评论人头像<code>avatar</code>、评论人昵称<code>nickName</code>
</li>
</ol>
在设计好思路后，开干！
先完成提交评论的功能，在这里，我们选择自定义事件的方法来实现组件间通信，在点击提交按钮时触发一个自定义事件<code>submitComment</code>，并将评论内容传递出去
<pre><code class="hljs language-js">connectedCallback() {
 const submitBtn = this.shadowRoot.querySelector(&#x27;#submitBtn&#x27;);
 const commentInput = this.shadowRoot.querySelector(&#x27;#input&#x27;);
 submitBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
 // 注意1：触发事件的是this
 const res = this.dispatchEvent(new CustomEvent(&#x27;submitComment&#x27;, {
 // 注意2：需要将数据放在detail属性上
 detail: commentInput.value,
 }));
 });
}
</code></pre>
有两个注意点注意：
<ol>
<li>触发事件的是<code>this</code>，即当前组件
</li>
<li>数据需要放置在自定义事件的<code>detail</code>属性上，直接传递数据或者放在其他属性上会接收不到
</li>
</ol>
🚩
接着是父组件监听该事件并处理数据
<pre><code class="hljs language-js">// 注意1：需要先获取当前组件，然后添加监听
const reply = document.querySelector(&quot;#reply&quot;);
reply.addEventListener(&quot;submitComment&quot;, (e) =&gt; {
 comments.push({
 comment: e.detail,
 nickName,
 avatar,
 });
 console.log(&quot;comments&quot;, comments);
 // 注意2：设置的属性会自动转为字符串，导致组件无法解析数据，因此需要JSON.stringify
 reply.setAttribute(&quot;comments&quot;, JSON.stringify(comments));
});
</code></pre>
同样有两个注意点：
<ol>
<li>需要先获取当前组件，然后在当前组件上添加监听
</li>
<li>组件的属性会自动将设置的值转为字符串类型，因此需要先<code>JSON.stringify</code>
</li>
</ol>
最后，完成渲染每一条评论的代码
<pre><code class="hljs language-javascript">renderComments(comments) {
 const Comment = ({ avatar, nickName, comment }) =&gt; (`
 ...
 `);
 const commentsContainer = this.shadowRoot.querySelector(&#x27;#commentsContainer&#x27;);
 commentsContainer.innerHTML = comments.reduce((acc, cur) =&gt; `${acc}${Comment(cur)}`, &#x27;&#x27;);
}
</code></pre>
该函数会在<code>attributeChangedCallback</code>监听到<code>comments</code>变化时调用，渲染出最新的评论
<pre><code class="hljs language-js">attributeChangedCallback(name, oldValue, newValue) {
 if (name === &#x27;comments&#x27;) {
 this.renderComments(JSON.parse(newValue));
 }
}
</code></pre>
最后的效果
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/reply.gif" alt="web component reply">
🎉
ps：该组件还有不少待完善的地方：提交按钮没有<code>loading</code>、没有校验输入值，数据安全性较低，存在 XSS 攻击的隐患、写死提交时间等，这些都会在后面慢慢完善
完整代码<a href="https://github.com/mrrs878/web-components/blob/main/reply.html">在这里</a>

 <h2>
 
 总结
 
 </h2>
 Web Component 可用来开发跨框架组件，特性基本够用，使用起来也挺方便，只是开发体验有待提高，需要不停地使用原生 api 操作 dom；其次，使用自定义事件来实现组件间通信，代码量有点多（可能还有更好的方法我没找到 🤔）。
总体来说，使用 Web Component 来开发一套组件库也是一种新的的思路，新的选择，值得尝试

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">MDN-Web Components</a>
<a href="https://github.com/mdn/web-components-examples">MDN/web-components-examples</a>

经过前两天的学习，已经基本入门 Web Component ，那么就开始实战，开发第一个组件

不过在此之前，还要介绍另一个特性

## slot

> slot 由其 name 属性标识，并且允许您在模板中定义占位符，当在标记中使用该元素时，该占位符可以填充所需的任何 HTML 标记片段。--MDN

比如我们的`template`是这样的：在需要的地方放置一个指定`name`属性的`slot

Web Component-开发组件

我们可以通过加载自定义字体来实现字体反爬虫，那么如何检测字体是否正常加载呢？
有几个维度的检测：
<ol>
<li>检测字体是否加载成功
</li>
<li>检测内容是否正常渲染
</li>
</ol>

 <h2>
 
 检测字体是否加载
 
 </h2>
 最简单的方法是使用浏览器提供的<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet">FontFaceSet API</a>来检测，其中要用到的是<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet/check">FontFaceSet.check()</a>
<blockquote>
FontFaceSet 的check()方法会返回是否在给定的字体列表中的所有字体已经被加载并可用。--MDN
</blockquote>
示例：
<pre><code class="hljs language-js">document.fonts.check(&quot;12px courier&quot;);

document.fonts.check(&quot;12px MyFont&quot;，&quot;ß&quot;); // 如果字体“MyFont”具有ß字符，则返回true。
</code></pre>
但这个检测较为简陋，无法检测字体错误的情况（字体正常加载，但不是我们想要的，页面上显示乱码）

 <h2>
 
 检测内容是否正常渲染
 
 </h2>
 针对这种情况，我们可以使用一些比较骚的操作：
<ol>
<li>创建一个span标签
</li>
<li>给标签添加特定字符
</li>
<li>重置字体样式
</li>
<li>分别测量在添<code>font-family</code>前后标签大小
</li>
<li>大小一致 ? 字体加载失败 : 字体加载成功
</li>
</ol>
（这里要创建<code>span</code>标签，如果是<code>div</code>的话宽度默认占满，无法测量真实的大小）
使用代码表示就是：
<pre><code class="hljs language-js">/**
 * 检测字体是否正常渲染
 * @param {string} font 字体名称
 * @param {Array&lt;string&gt;} phrase 待匹配的字符
 * @return {boolean} 是否存在该字体
 */
export function checkFont(font, phrase) {

 /**
 * 可以使用上述的 FontFaceSet API 作简要的判断，如果字体都不存在，那么肯定渲染失败
 */
 if (document.fonts) {
 const fonts = [...document.fonts];
 if (fonts.findIndex((f) =&gt; f.family === font) === -1) {
 console.log(&#x27;font dose not exist&#x27;);
 return false;
 }
 }

 // 创建一个空的 span 标签来填充内容
 let node = document.createElement(&quot;span&quot;);

 // 因为可以同时检测多个字符，因此需要存储一下各个字符的大小
 const sizes = [];

 /**
 * 计算单个字符的尺寸
 * @param {string} char 待计算的字符
 */
 function checkChar(char) {
 // 重置字体
 node.style.fontFamily = &quot;sans-serif&quot;;
 
 // 填充内容
 node.innerHTML = char;

 const size = {};

 // 先保存未设置字体时的尺寸
 size.withoutFont = {
 width: node.offsetWidth,
 height: node.offsetHeight,
 };

 // 设置待检测的字体
 node.style.fontFamily = font + &quot;, sans-serif&quot;;

 // 保存设置字体后的尺寸
 size.withFont = {
 width: node.offsetWidth,
 height: node.offsetHeight,
 };

 // 保存该字符设置字体/未设置字体时的尺寸，待字符计算完毕后统一计算
 sizes.push(size);
 }

 // 隐藏该 span 标签
 node.style.position = &quot;absolute&quot;;
 node.style.left = &quot;-10000px&quot;;
 node.style.top = &quot;-10000px&quot;;

 // 字体大小设置大些误差小（offsetWidth和offsetHeight会四舍五入）
 node.style.fontSize = &quot;300px&quot;;

 // 重置字体样式
 node.style.fontFamily = &quot;sans-serif&quot;;
 node.style.fontVariant = &quot;normal&quot;;
 node.style.fontStyle = &quot;normal&quot;;
 node.style.fontWeight = &quot;normal&quot;;
 node.style.letterSpacing = &quot;0&quot;;

 // 插入页面中才会有 offsetWidth 和 offsetHeight
 document.body.appendChild(node);

 // 计算每一个字符的尺寸
 phrase.forEach(checkChar);

 /**
 * 1. 当 offsetWidth 和 offsetHeight 均不相同时说明字体存在
 * 2. 有一个字符的尺寸相同就说明字体有误
 */
 const res =
 node &amp;&amp;
 sizes.reduce(
 (acc, cur) =&gt;
 acc &amp;&amp;
 (cur.withFont.width !== cur.withoutFont.width ||
 cur.withFont.height !== cur.withoutFont.height),
 true
 );

 // 做一些善后工作
 node.parentNode.removeChild(node);
 node = null;

 return res;
}
</code></pre>

 <h2>
 
 指数退避算法检测内容是否正常渲染
 
 </h2>
 由于网络字体的加载需要时间，我们可通过简单地设置一个延时调用上述的<code>checkFont</code>，但可能有更好的方式来实现：<a href="https://cloud.google.com/memorystore/docs/redis/exponential-backoff?hl=zh-cn">指数退避算法</a>
（自己理解）简单来讲就是在不超过所设置的时间范围内，以指数级超市时间定期重试
示例：
<ol>
<li>向服务端发送请求
</li>
<li>失败？等待1秒后重试
</li>
<li>失败？等待2秒后重试
</li>
<li>失败？等待4秒后重试
</li>
<li>失败？等待8秒后重试
</li>
<li>以此类推，直到达到超时时间
</li>
</ol>
在检测字体是否正常加载时，我们也可以使用该算法来更好地检测
（也可使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/loadingdone_event">FontFaceSet: loadingdone event</a>来作为时间点检测）
<pre><code class="hljs language-js">const check = (phrase, options = { timeout: 8192 }) =&gt; {
 function doCheck(t) {
 let tid = setTimeout(() =&gt; {
 clearTimeout(tid);
 tid = null;
 const res = checkFont(&quot;m-font&quot;, phrase);
 if (res) {
 // success!
 }
 if (!res &amp;&amp; (t &lt;&lt; 1 &lt; options.timeout)) {
 doCheck(t &lt;&lt; 1);
 }
 if (!res &amp;&amp; (t &lt;&lt; 1) &gt;= options.timeout) {
 // parse error!
 }
 }, t);
 }

 // 我们可以以64ms为起始时间点
 doCheck(2 &lt;&lt; 5);
};
</code></pre>

 <h2>
 
 总结
 
 </h2>
 <ol>
<li>可使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet">FontFaceSet API</a>来做简单的字体是否加载判断，但无法检测字体是否正常渲染
</li>
<li>不同字体下，大概率各个字符的大小是不一样的，可依次来检测字体是否正常渲染
</li>
</ol>
结束！

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet">FontFaceSet API</a>
<a href="https://stackoverflow.com/questions/65095157/how-can-i-detect-when-a-font-is-downloaded-via-csss-unicode-range-descriptor">How can I detect when a font is downloaded via CSS&#39;s &quot;unicode-range&quot; descriptor? </a>
<a href="https://cloud.google.com/memorystore/docs/redis/exponential-backoff?hl=zh-cn">指数退避算法</a>

我们可以通过加载自定义字体来实现字体反爬虫，那么如何检测字体是否正常加载呢？

有几个维度的检测：

1. 检测字体是否加载成功

2. 检测内容是否正常渲染

## 检测字体是否加载

最简单的方法是使用浏览器提供的[FontFaceSet API](https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet)来检测，其中要用到的

检测自定义字体是否加载

有时候我们在提交代码时选错了git账号或者初始化仓库时没有配置git账号，恰好你也忽略掉了git的提示：
<pre><code class="hljs language-shell">Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:

 git config --global user.name &quot;Your Name&quot;
 git config --global user.email you@example.com

After doing this, you may fix the identity used for this commit with:

 git commit --amend --reset-author
</code></pre>
在这之后，你可能又进行了几次提交......
某一时刻你突然意识到好像有什么不对劲🤔
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/shiqingbingbujiandan.jpeg" alt="事情并不简单">
慌忙中执行了一下<code>git log</code>
<pre><code class="hljs language-shell">git log

commit b9955bf47f6437c2d72daf99e809737bbb79f2e1 (HEAD -&gt; master)
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:49:01 2022 +0800

 fix: fix 1.1

commit ee0c985a1f158dcfe72b319727f401ae0742ed23
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:48:44 2022 +0800

 fix: fix 1.0

commit f6bac54c00f6b869894e8214aae7b8aaacdec5d5
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:47:23 2022 +0800

 feat: 1.0
</code></pre>
寄了🙁
<code>Author</code>全是另一个，假设刚好你的团队是按照 bug数/代码量 来进行代码质量评估的，那现在岂不是自己给自己挖坑，强行拉低分母
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/wtmlaji.jpeg" alt="我tm怎么这么垃圾">
稳住别慌，问题不大。git这么牛逼的东西怎么可能没想到我们这种傻瓜操作呢？接下来我会分几种不同的情况分别给出解决方案
首先，感谢祖师爷！

 <h2>
 
 只修改最后一次提交
 
 </h2>
 假如你只是提交了一次就发现不对劲，那么你可以很简单地挽救回来，执行以下命令即可：
<pre><code class="hljs language-shell"># 注意邮箱需包括&lt;&gt;尖括号
git commit --amend --author=&quot;NewAuthor &lt;NewEmail@address.com&gt;&quot;
</code></pre>
或者在项目目录下配置好git账号后执行：
<pre><code class="hljs language-shell">git commit --amend --reset-author
</code></pre>
此时<code>git log</code>长这样
<pre><code class="hljs language-shell">git log

commit 8b7c9afb16d25a89cb2d8c3d864e8422c088966c (HEAD -&gt; master)
Author: mrrs878 &lt;mrrs878@foxmail.com&gt;
Date: Sun Apr 17 20:49:01 2022 +0800

 fix: fix 1.1

commit ee0c985a1f158dcfe72b319727f401ae0742ed23
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:48:44 2022 +0800

 fix: fix 1.0

commit f6bac54c00f6b869894e8214aae7b8aaacdec5d5
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:47:23 2022 +0800

 feat: 1.0
</code></pre>
好耶！🎉
那假如你是提交了好几次才记起来了呢
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/cangtianna.png" alt="苍天呐">

 <h2>
 
 修改历史提交
 
 </h2>
 依旧稳住别慌，问题不大
此时就要祭出<code>git rebase</code>了
假如你的<code>git log</code>长这样
<pre><code class="hljs language-shell">git log

commit 8b7c9afb16d25a89cb2d8c3d864e8422c088966c (HEAD -&gt; master)
Author: mrrs878 &lt;mrrs878@foxmail.com&gt;
Date: Sun Apr 17 20:49:01 2022 +0800

 fix: fix 1.1

commit ee0c985a1f158dcfe72b319727f401ae0742ed23
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:48:44 2022 +0800

 fix: fix 1.0

commit f6bac54c00f6b869894e8214aae7b8aaacdec5d5
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:47:23 2022 +0800

 feat: 1.0
</code></pre>
（没错，我还是拿的上面举例子👆）
假如你要修复<code>commit message</code>为<code>fix: fix 1.0</code>的这个<code>commit</code>，执行这个命令：
<pre><code class="hljs language-shell"># -i 后面跟的是fix: fix1.0之前的一个commit的hash
git rebase -i f6bac54c00f6b869894e8214aae7b8aaacdec5d5
</code></pre>
或者这样:
<pre><code class="hljs language-shell"># HEAD~2 表示后退两步
git rebase -i HEAD~2
</code></pre>
（推荐直接写hash值，当你的commit落后太多不好计算🤣）
此时你的终端大概率可能会变成这样：
<pre><code class="hljs language-shell">echo@echodeMBP  ~/Frontend/test/git-commit-change  ➦ ee0c985 &gt;R&gt; 
</code></pre>
这两个命令执行的结果都是一样的：
<pre><code class="hljs language-shell">pick ee0c985 fix: fix 1.0
pick 8b7c9af fix: fix 1.1

# Rebase f6bac54..8b7c9af onto f6bac54 (2 commands)
#
# Commands:
# p, pick &lt;commit&gt; = use commit
# r, reword &lt;commit&gt; = use commit, but edit the commit message
# e, edit &lt;commit&gt; = use commit, but stop for amending
# s, squash &lt;commit&gt; = use commit, but meld into previous commit
# f, fixup [-C | -c] &lt;commit&gt; = like &quot;squash&quot; but keep only the previous
# commit&#x27;s log message, unless -C is used, in which case
# keep only this commit&#x27;s message; -c is same as -C but
# opens the editor
# x, exec &lt;command&gt; = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with &#x27;git rebase --continue&#x27;)
# d, drop &lt;commit&gt; = remove commit
# l, label &lt;label&gt; = label current HEAD with a name
# t, reset &lt;label&gt; = reset HEAD to a label
# m, merge [-C &lt;commit&gt; | -c &lt;commit&gt;] &lt;label&gt; [# &lt;oneline&gt;]
</code></pre>
此时会进入命令行交互状态
光标移动到选择你要修改的那个<code>commit</code>，并将前方的<code>pick</code>改为<code>edit</code>，然后<code>:</code> + <code>wq</code>保存退出
此时终端会打印这个消息
<pre><code class="hljs language-shell">Stopped at ee0c985... fix: fix 1.0
You can amend the commit now, with

 git commit --amend 

Once you are satisfied with your changes, run

 git rebase --continue
</code></pre>
接着执行这个命令：
<pre><code class="hljs language-shell">git commit --amend --reset-author
</code></pre>
或者最上面那个：
<pre><code class="hljs language-shell">git commit --amend --author=&quot;NewAuthor &lt;NewEmail@address.com&gt;&quot;
</code></pre>
此时又会进入命令行交互界面，类似于执行<code>git commit -m &quot;xxxx&quot;</code>时。由于我们什么都没改，因此可以<code>:</code> + <code>wq</code>退出即可
最后执行：
<pre><code class="hljs language-shell">git rebase --continue
</code></pre>
这时候再<code>git log</code>一下看看效果👀
<pre><code class="hljs language-shell">commit 24ff96047eeb5531841b1d93242af992b6e54fcc (HEAD -&gt; master)
Author: mrrs878 &lt;mrrs878@foxmail.com&gt;
Date: Sun Apr 17 20:49:01 2022 +0800

 fix: fix 1.1

commit 40074be6073f9f76817665d6de078143dbf6739d
Author: mrrs878 &lt;mrrs878@foxmail.com&gt;
Date: Sun Apr 17 21:14:52 2022 +0800

 fix: fix 1.0

commit f6bac54c00f6b869894e8214aae7b8aaacdec5d5
Author: echo &lt;echo@echodeMBP.lan&gt;
Date: Sun Apr 17 20:47:23 2022 +0800

 feat: 1.0
</code></pre>
好耶！成功了 🎉
到这里可以解决大多数的人的问题了，那可能会有人问了，如果我一开始就是错的怎么办呢？
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/male.jpeg" alt="麻了">

 <h2>
 
 修改第一次提交
 
 </h2>
 依旧问题不大，将上面的
<pre><code class="hljs language-shell">git rebase -i xxx
</code></pre>
替换成
<pre><code class="hljs language-shell">git rebase -i --root
</code></pre>
这时你会发现可以修改第一次提交了
<pre><code class="hljs language-shell">pick f6bac54 feat: 1.0
pick 40074be fix: fix 1.0
pick 24ff960 fix: fix 1.1

# Rebase 24ff960 onto fba660d (3 commands)
</code></pre>
接下来的就不用我教你了吧

 <h2>
 
 总结
 
 </h2>
 <ul>
<li>如果是最后一次提交错误，可以简单地执行<code>git commit --amend --author=&quot;NewAuthor &lt;NewEmail@address.com&gt;&quot;</code>或<code>git commit --amend --reset-author</code>来修改信息
</li>
<li>如果是某一次提交错误，可以通过<code>git rebase -i xxx</code> + 第一种的命令来修改信息
</li>
<li>如果要修改第一次提交，可以将第二种的<code>git rebase -i xxx</code>替换成<code>git rebase -i --root</code>来修改信息
</li>
</ul>
结束！

 <h2>
 
 参考
 
 </h2>
 <a href="https://www.jianshu.com/p/51f5cbb81cae">Git修改提交历史中的作者及邮箱信息</a>
<a href="https://stackoverflow.com/questions/2246208/change-first-commit-of-project-with-git">Change first commit of project with Git?</a>

有时候我们在提交代码时选错了git账号或者初始化仓库时没有配置git账号，恰好你也忽略掉了git的提示：

``` shell
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
Yo

Git学习-修改历史commit

<h2>
 
 WHAT
 
 </h2>
 提供构建后代码到源代码的映射
接收以下值：<code>[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map</code>
<ul>
<li><code>source-map</code>: 外部
错误代码准确信息 和 源代码的错误位置
</li>
<li><code>inline-source-map</code>: 内联
只生成-个内联<code>source-map</code>
错误代码准确信息 和 源代码的错误位置
</li>
<li><code>hidden-source-map</code>: 外部
错误代码准确信息
不能追踪源代码错误，只能提示到构建后代码的错误位置
</li>
<li><code>eval-source-map</code>: 内联
每一个文件都生成对应的<code>source-map</code>, 都在<code>eval</code>函数内
错误代码准确信息 和 源代码的错误位置
</li>
<li><code>nosources-source-map</code>: 外部
错误代码准确信息
</li>
<li><code>cheap-source-map</code>: 外部
错误代码准确信息 和 源代码的错误位置
只能精确的行
</li>
</ul>
内联和外部的区别: 
<ol>
<li>外部生成了文件，内联没有</li>
<li>内联构建速度更快</li>
</ol>

 <h2>
 
 WHY
 
 </h2>
 方便调试、定位错误位置

 <h2>
 
 HOW
 
 </h2>
 在配置文件<code>webpack.config.js</code>中添加<code>devtool</code>配置
<pre><code class="hljs language-js">// webpack.config.js

module.exports = {
 devtool: &#x27;source-map&#x27;,
}
</code></pre>
生产环境和开发环境有不同的配置
开发环境: 速度快，调试更友好
<ul>
<li>速度快(<code>eval</code> &gt; <code>inline</code> &gt; <code>cheap</code> &gt; <code>...</code>)
<ul>
<li><code>eval-cheap-source-map</code>
</li>
<li><code>eval-source-map</code>
</li>
</ul>
</li>
<li>调试更友好
<ul>
<li><code>source-map</code>
</li>
<li><code>cheap-module-source-map</code>
</li>
<li><code>cheap-source-map</code>
</li>
</ul>
</li>
</ul>
 --&gt; <code>eval-source-map</code> / <code>eval-cheap-module-source-map</code>
生产环境: 源代码要不要隐藏? 调试要不要更友好?

## WHAT

提供构建后代码到源代码的映射

接收以下值：`[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`

- `source-map`: 外部

  错误代码准确信息 和 源代码的错误位置

- `inline-source-map`: 内联

  只生成-个内联`source-map`

  错误代码准确信

webpack学习-source-map

<code>script</code>标签用于加载脚本与执行脚本，直接使用<code>script</code>脚本的话，浏览器会按照顺序来加载并执行脚本，在脚本加载&amp;执行的过程中，会阻塞后续的<code>DOM</code>渲染
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/defer-0.png" alt="默认script加载顺序">
好在<code>script</code>提供了两种方式来解决上述问题，<code>async</code>和<code>defer</code>，这两个属性使得<code>script</code>都不会阻塞DOM的渲染。
但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。

 <h2>
 
 defer
 
 </h2>
 用来通知浏览器该脚本将在文档完成解析后，触发<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a>事件前执行
有<code>defer</code>属性的脚本会阻止<code>DOMContentLoaded</code>事件，直到脚本被加载并且解析完成
如果有多个设置了<code>defer</code>的<code>script</code>标签存在，则会按照顺序执行所有的<code>script</code>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/defer-1.png" alt="defer">
虽然<code>script3</code>加载快于<code>script2</code>，但由于<code>defer</code>存在，因此<code>script3</code>只能等<code>script2</code>执行完毕后再执行

 <h2>
 
 async
 
 </h2>
 对于普通脚本，如果存在<code>async</code>属性，那么普通脚本会被并行请求，并尽快解析和执行
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/defer-2.png" alt="async">
<code>script3</code>加载快于<code>script2</code>，因此<code>script3</code>早于<code>script2</code>执行

 <h2>
 
 图示
 
 </h2>
 <img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/defer-async.png" alt="defer-async图示">

 <h2>
 
 推荐的应用场景
 
 </h2>
 
 <h3>
 
 defer
 
 </h3>
 如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
例：
<ul>
<li>评论框</li>
<li>代码语法高亮</li>
<li>polyfill.js</li>
</ul>

 <h3>
 
 async
 
 </h3>
 如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
例：
<ul>
<li>百度统计</li>
</ul>
如果不太能确定的话，用defer总是会比async稳定。。。

script标签用于加载脚本与执行脚本，直接使用script脚本的话，浏览器会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染

HTML相关-script标签中的async和defer

Web Component 有点东西

 <h2>
 
 什么是 Web Component
 
 </h2>
 <blockquote>
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。--MDN
</blockquote>
简单来讲就是浏览器提供的原生组件复用方案。主要由三种技术方案实现：
<ul>
<li>Custom elements（自定义元素）。可以用来定义标签（元素）
</li>
<li>Shadow DOM（影子 DOM）。可以用来做样式隔离
</li>
<li>HTML templates（HTML 模板）。可以用来定义一个基础的组件的dom结构
</li>
</ul>

 <h2>
 
 怎么用 Web Component
 
 </h2>
 实现 Web Component 的最基本流程：
<ol>
<li>使用<code>template</code>来定义一个组件的dom</li>
</ol>
<pre><code class="hljs language-html">&lt;template id=&quot;mHeader&quot;&gt;
 &lt;div&gt;
 &lt;span class=&quot;content&quot; id=&quot;content&quot;&gt;我是头部&lt;/span&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<ol start="2">
<li>接着基于👆创建的<code>template</code>创建一个类组件</li>
</ol>
<pre><code class="hljs language-jsx">class MHeader extends HTMLElement {
 constructor() {
 super();
 // attachShadow() 方法来将一个 shadow root 附加到任何一个元素上，该方法返回一个 shadow root 。
 const shadowRoot = this.attachShadow({ mode: &quot;closed&quot; });
 const template = document.querySelector(&quot;#mHeader&quot;);
 const content = template.content.cloneNode(true);
 shadowRoot.appendChild(content);
 }
}
</code></pre>
<ol start="3">
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CustomElementRegistry/define">CustomElementRegistry.define()</a> 方法注册自定义标签（元素）</li>
</ol>
<pre><code class="hljs language-jsx">/**
 * 注意，组件名是有限制的，MHeader、header1等都是不能用的，浏览器会报错
 * 
 * web-component.html:33 Uncaught DOMException: Failed to execute &#x27;define&#x27; on &#x27;CustomElementRegistry&#x27;: &quot;header1&quot; is not a valid custom element name
 at file:///Users/echo/Desktop/web-component.html:33:27
 */
window.customElements.define(&quot;m-header&quot;, MHeader);
</code></pre>
<ol start="4">
<li>使用该组件</li>
</ol>
<pre><code class="hljs language-html">&lt;!-- 使用的地方没有限制，自闭合也是可以的 --&gt;
&lt;m-header /&gt;
</code></pre>
<ol start="5">
<li>给组件加点样式</li>
</ol>
可以直接在<code>template</code>里添加<code>style</code>标签，在里面可以添加只在该<code>template</code>下生效的样式
<code>:host</code>选择器可以选择组件的根元素
<pre><code class="hljs language-html">&lt;template id=&quot;mHeader&quot;&gt;
 &lt;style&gt;
 :host {
 font-size: 32px;
 }
 .content {
 color: #f00;
 }
 &lt;/style&gt;
 &lt;div&gt;
 &lt;span class=&quot;content&quot; id=&quot;content&quot;&gt;我是头部&lt;/span&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<ol start="6">
<li>加点属性试试 🤔</li>
</ol>
需要在第 2 步在定义组件时用到<code>this.getAttribute</code>来获取传入的属性
<pre><code class="hljs language-jsx">class MHeader extends HTMLElement {
 constructor() {
 // ...
 const title = this.getAttribute(&quot;title&quot;);
 if (title) {
 content.querySelector(&quot;#content&quot;).innerText = title;
 }
 // ...
 }
}

&lt;m-header title=&quot;hello&quot; /&gt;;
</code></pre>
<ol start="7">
<li>添加一些交互</li>
</ol>
可以使用<code>querySelector</code>获取到<code>template</code>内部的一些元素来添加事件
<pre><code class="hljs language-html">&lt;template id=&quot;mHeader&quot;&gt;
 &lt;div&gt;
 &lt;!-- ... --&gt;
 &lt;button id=&quot;login&quot;&gt;login&lt;/button&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
接着绑定事件
<pre><code class="hljs language-jsx">class MHeader extends HTMLElement {
 constructor() {
 // ...
 content.querySelector(&quot;#login&quot;).addEventListener(&quot;click&quot;, () =&gt; {
 alert(&quot;login&quot;);
 });
 // ...
 }
}
</code></pre>
<ol start="8">
<li>与父组件的通信</li>
</ol>
通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a>来进行通信
完整代码
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot; /&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;/head&gt;

 &lt;body&gt;
 &lt;template id=&quot;mHeader&quot;&gt;
 &lt;style&gt;
 :host {
 font-size: 32px;
 }

 .content {
 color: #f00;
 }
 &lt;/style&gt;
 &lt;div&gt;
 &lt;span class=&quot;content&quot; id=&quot;content&quot;&gt;我是头部&lt;/span&gt;
 &lt;button id=&quot;login&quot;&gt;login&lt;/button&gt;
 &lt;/div&gt;
 &lt;/template&gt;

 &lt;m-header id=&quot;mHeader&quot; title=&quot;hello&quot; /&gt;

 &lt;script&gt;
 class MHeader extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({ mode: &quot;closed&quot; });
 const template = document.querySelector(&quot;#mHeader&quot;);
 const content = template.content.cloneNode(true);
 const title = this.getAttribute(&quot;title&quot;);
 if (title) {
 content.querySelector(&quot;#content&quot;).innerText = title;
 }
 const myEvent = new CustomEvent(&quot;login&quot;, {
 detail: &quot;这是子组件传过来的消息&quot;,
 });
 const loginBtn = content.querySelector(&quot;#login&quot;);
 loginBtn.addEventListener(&quot;click&quot;, () =&gt; {
 alert(&quot;login&quot;);
 });
 shadowRoot.appendChild(content);
 }
 }

 window.customElements.define(&quot;m-header&quot;, MHeader);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
未完待续
to be continued...

 <h2>
 
 基于 Web Component 的落地应用
 
 </h2>
 GitHub。GitHub是基于 Web Components 来开发的
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6309ad13b5b24d23aaf42e426923d4c4~tplv-k3u1fbpfcp-watermark.image?" alt="image.png">
其次，Vue.js和微信小程序也是基于 Web Components 来做组件化的

 <h2>
 
 总结
 
 </h2>
 Web Component 是浏览器提供的可以用于组件复用的方案，可以实现样式隔离，自定义属性、父子组件通信等功能，有不少应用/框架都是基于Web Component来进行开发的，前景广阔。但Web Component书写起来还是有些不够便捷，需要用到原生 dom 操作 api

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">MDN-Web Components</a>
<a href="https://github.com/mdn/web-components-examples">MDN/web-components-examples</a>

Web Component 有点东西

## 什么是 Web Component

> Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。--MDN

简单来讲就是浏览器提供的原生**组件复用**方案。主要由三种技术方案实现：

- Custom elements（自定义元素）。可以用来定义标签（元素）

Web Component-初识

在之前大概了解了 Web Component，知道是怎么玩的，不过在查阅资料后发现之前有些错误

 <h2>
 
 Node.cloneNode 的局限性
 
 </h2>
 在之前，使用的是<code>template.content.cloneNode(true);</code>来创建出一个新的节点，这种方法有一些局限性：会复制原节点的所有属性及属性值，其中就包括<code>id</code>，这样页面中就有多个<code>id</code>一样的元素了
<blockquote>
拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如 onclick=&quot;alert(1)&quot;),但不会拷贝那些使用 addEventListener()方法或者 node.onclick = fn 这种用 JavaScript 动态绑定的事件. --mdn
</blockquote>
MDN 同样也给出警告
<blockquote>
注意:为了防止一个文档中出现两个 ID 重复的元素,使用 cloneNode()方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID
</blockquote>
而且，生成的节点的<code>ownerDocument</code>仍然指向源节点的<code>ownerDocument</code>
既然这个方法有一定的局限性，那么有没有更好的方法呢？有的！

 <h2>
 
 document.importNode
 
 </h2>
 <blockquote>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/importNode">document.importNode</a>将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中
</blockquote>
使用方式
<pre><code class="hljs language-js">// deep参数表示是否递归复制源节点的所有子节点
const node = document.importNode(externalNode, deep);
</code></pre>
注意：
新生成节点的 <code>parentNode</code> 是 <code>null</code>，因为它还没有插入当前文档的文档树中，属于游离状态，因此无法对其进行操作
这样的话我们就可以很方便的修改新节点的<code>ownerDocument</code>（在<code>append</code>之后自动指向当前<code>document</code>）
试试新的 api 来创建组件
<pre><code class="hljs language-html">&lt;script&gt;
 class MHeader extends HTMLElement {
 constructor() {
 super();
 // ...
 const content = document.importNode(template.content, true);
 /**
 * 注意，要先将节点插入到shadowRoot后才能对其进行操作
 */
 shadowRoot.appendChild(content);
 // ...
 }
 }
&lt;/script&gt;
</code></pre>

 <h2>
 
 HTMLElement 的生命周期
 
 </h2>
 在之前，我们都是将各种操作直接写在构造函数里，这显然有些臃肿，那么有没有一些办法可以将这些逻辑分发出去呢？有的！
在<code>HTMLElement</code>内，有一些<a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements#%E4%BD%BF%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0">生命周期</a>
<ul>
<li><code>connectedCallback</code>，当 <code>custom element</code> 首次被插入文档 DOM 时被调用
</li>
<li><code>disconnectedCallback</code>，当 <code>custom element</code>从文档 DOM 中删除时被调用
</li>
<li><code>adoptedCallback</code>， 当 <code>custom element</code>被移动到新的文档时被调用
</li>
<li><code>attributeChangedCallback</code>，当 <code>custom element</code>增加、删除、修改自身属性时被调用
</li>
</ul>
据此，我们可以重构一下之前的组件
<pre><code class="hljs language-html">&lt;script&gt;
 class MHeader extends HTMLElement {
 static get observedAttributes() {
 return [&quot;title&quot;];
 }
 constructor() {
 super();
 // 会自动向this上挂载一个shadowRoot
 this.attachShadow({ mode: &quot;open&quot; });
 const template = document.querySelector(&quot;#mHeaderTemplate&quot;);
 // const content = template.content.cloneNode(true);
 const content = document.importNode(template.content, true);
 this.shadowRoot.appendChild(content);
 }

 connectedCallback() {
 const loginBtn = this.shadowRoot.querySelector(&quot;#login&quot;);
 loginBtn.addEventListener(&quot;click&quot;, () =&gt; {
 this.setAttribute(&quot;title&quot;, &quot;登录成功&quot;);
 });
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === &quot;title&quot;) {
 this.shadowRoot.querySelector(&quot;#content&quot;).innerText = newValue;
 }
 }
 }
&lt;/script&gt;
</code></pre>
在这里，我们使用<code>attributeChangedCallback</code>来监听组件属性变化，在<code>title</code>属性发生变化时，更新元素的值。该回调会返回三个参数：
<ul>
<li><code>name</code>，变化的属性的名字
</li>
<li><code>oldValue</code>，属性之前的值
</li>
<li><code>newValue</code>，要设置的值
</li>
</ul>
（react 写的多了，有点梦回 vue 的感觉 🤔）
此外有一点要注意：
需要在<code>static get observedAttributes</code>函数里声明一下要监听的属性名
<pre><code class="hljs language-js">static get observedAttributes() {
 return [&quot;title&quot;];
}
</code></pre>
完整代码
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot; /&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;/head&gt;

 &lt;body&gt;
 &lt;template id=&quot;mHeaderTemplate&quot;&gt;
 &lt;style&gt;
 :host {
 font-size: 32px;
 }

 .content {
 color: #f00;
 }
 &lt;/style&gt;
 &lt;div&gt;
 &lt;span class=&quot;content&quot; id=&quot;content&quot;&gt;我是头部&lt;/span&gt;
 &lt;button id=&quot;login&quot;&gt;login&lt;/button&gt;
 &lt;/div&gt;
 &lt;/template&gt;

 &lt;m-header id=&quot;mHeader&quot; title=&quot;hello&quot; /&gt;

 &lt;script&gt;
 class MHeader extends HTMLElement {
 static get observedAttributes() {
 return [&quot;title&quot;];
 }
 constructor() {
 super();
 // 会自动向this上挂载一个shadowRoot
 this.attachShadow({ mode: &quot;open&quot; });
 const template = document.querySelector(&quot;#mHeaderTemplate&quot;);
 // const content = template.content.cloneNode(true);
 const content = document.importNode(template.content, true);
 this.shadowRoot.appendChild(content);
 }

 connectedCallback() {
 const loginBtn = this.shadowRoot.querySelector(&quot;#login&quot;);
 loginBtn.addEventListener(&quot;click&quot;, () =&gt; {
 this.setAttribute(&quot;title&quot;, &quot;登录成功&quot;);
 });
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === &quot;title&quot;) {
 this.shadowRoot.querySelector(&quot;#content&quot;).innerText = newValue;
 }
 }
 }

 window.customElements.define(&quot;m-header&quot;, MHeader);

 const mHeader = document.querySelector(&quot;#mHeader&quot;);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

 <h2>
 
 总结
 
 </h2>
 由于<code>Node.cloneNode</code>仍默认保留新节点的<code>ownerDocument</code>，因此使用起来没法放开，有些需要注意的地方。不过我们可以使用<code>document.importNode</code>来实现相同的功能，该API创建的节点处于游离状态，在进行<code>append</code>操作后会自动修正<code>ownerDocument</code>的指向
通过使用<code>custom elements</code>提供的生命周期函数，我们可以很方便地监听属性变化来做一些逻辑，但还是那句话书写起来有些不够便捷，需要用到原生 dom 操作 api，没准 jQuery 会借着 Web Components 再重新活跃起来

 <h2>
 
 参考
 
 </h2>
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">MDN-Web Components</a>
<a href="https://github.com/mdn/web-components-examples">MDN/web-components-examples</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/cloneNode">Node.cloneNode(deep)</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/importNode">document.importNode</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements#%E4%BD%BF%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0">使用 custom elements</a>

在之前大概了解了 Web Component，知道是怎么玩的，不过在查阅资料后发现之前有些错误

## Node.cloneNode 的局限性

在之前，使用的是`template.content.cloneNode(true);`来创建出一个新的节点，这种方法有一些局限性：会复制原节点的所有属性及属性值，其中就包括`id`，这样页面中就有多个`id`一样的元素了

> 拷贝它所有的属性以及属性

Web Component-自定义元素的生命周期

要想实现字体反爬虫，首先要有字体，那么如何制作字体呢

 <h2>
 
 原理
 
 </h2>
 一套字体是由多个字符组成，每个字符都有对应的字形，字形是由一系列<code>command</code>（类似svg）
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1b9fa3afe7d47dca17108785cc87800~tplv-k3u1fbpfcp-zoom-1.image" alt="制作字体">
我们要做的就是基于源字体，提取出特定的字符，调整该字符对应的字形（调整<code>command</code>的参数），最后导出一套新的字体
变换规则：根据<code>strength</code>和<code>distance</code>调整<code>glyph.path.command</code>的坐标点
基于<a href="https://opentype.js.org">opentype.js</a>

 <h2>
 
 代码实现
 
 </h2>
 <pre><code class="hljs language-js">import opentype from &#x27;opentype.js&#x27;; 
import { clone } from &#x27;ramda&#x27;
import fs from &quot;fs&quot;;
import { Chance } from &quot;chance&quot;;

const snapX = 0;
const snapY = 0;
const snapDistance = 2;

// 随机数生成器
const chance = new Chance();

// 调整path点
function snap(v, distance, strength) {
 return (v * (1.0 - strength)) + (strength * Math.round(v / distance) * distance);
}

// 对每个字符的字形做调整
function doSnap(sourcePath, options) {
 const { snapStrength, snapDistance, snapPathCmdCnt } = options;
 const path = clone(sourcePath);
 if (!path?.commands) return path;

 const cursorLeft = chance.integer({ min: 0, max: path.commands.length - snapPathCmdCnt });
 const cursorRight = chance.integer({ min: cursorLeft, max: cursorLeft + snapPathCmdCnt });

 for (let i = cursorLeft; i &lt; cursorRight; i += 1) {
 const cmd = path?.commands?.[i];
 if (cmd.type !== &#x27;Z&#x27;) {
 cmd.x = snap(cmd.x + snapX, snapDistance, snapStrength) - snapX;
 cmd.y = snap(cmd.y + snapY, snapDistance, snapStrength) - snapY;
 }
 if (cmd.type === &#x27;Q&#x27; || cmd.type === &#x27;C&#x27;) {
 cmd.x1 = snap(cmd.x1 + snapX, snapDistance, snapStrength) - snapX;
 cmd.y1 = snap(cmd.y1 + snapY, snapDistance, snapStrength) - snapY;
 }
 if (cmd.type === &#x27;C&#x27;) {
 cmd.x2 = snap(cmd.x2 + snapX, snapDistance, snapStrength) - snapX;
 cmd.y2 = snap(cmd.y2 + snapY, snapDistance, snapStrength) - snapY;
 }
 }

 return path;
}

/**
 * @description: TTF变码，基于一种字体，生成另一种新字体
 * @param {string} sourceFontPath 源字体
 * @param {string} words 要转换的字
 * @param {string|Array&lt;string&gt;} newFontPath 转换后的字体
 * @param {SnapConfiguration} snapConfig 字形变化配置
 * @return {object} 转换规则(映射表)
 */
function generateFont(sourceFontPath, words, newFontPath, snapConfig) {
 // 保存字符和unicode的映射关系
 const result = {};
 const sourceFont = opentype.loadSync(sourceFontPath);

 const notdefGlyph = new opentype.Glyph({
 name: &#x27;.notdef&#x27;,
 advanceWidth: sourceFont.getAdvanceWidth(&#x27;.&#x27;),
 path: new opentype.Path(),
 });

 const snapStrength = chance.integer({ min: 1, max: 10 });

 // 生成新的字形
 // sourceFont.stringToGlyphs(words) 提取出要转换的字符的字形
 const subGlyphs = sourceFont.stringToGlyphs(words).map((glyph, index) =&gt; {
 const word = words[index];
 // 针对反爬虫需求，每个字符需要生成新的unicode
 const unicode = chance.integer({ min: 255, max: 65535 });
 const { consistent, isSnap, snapPathCmdCnt } = snapConfig;
 let path = glyph.path;
 
 if (isSnap) {
 // 每个字符共用一套字形变换配置or相互独立
 const snapConfiguration = consistent
 ? { 
 snapDistance,
 snapStrength,
 snapPathCmdCnt,
 }
 : { 
 snapPathCmdCnt,
 snapDistance,
 snapStrength: chance.integer({ min: 1, max: 10 }),
 }
 path = doSnap(glyph.path, snapConfiguration);
 }
 
 // 保存映射关系
 result[word] = `&amp;#x${Number(unicode).toString(16)};`;

 return new opentype.Glyph({
 index: index + 1,
 unicode,
 name: word,
 path,
 advanceWidth: glyph.advanceWidth,
 });
 });

 const { unitsPerEm, ascender, descender } = sourceFont;

 // 生成新的字体文件
 const res = new opentype.Font({
 familyName: &#x27;yqn-font&#x27;,
 styleName: &#x27;Medium&#x27;,
 unitsPerEm,
 ascender,
 descender,
 glyphs: [notdefGlyph, ...subGlyphs],
 });

 // 可能需要保存多份字体文件（不同格式，做浏览器兼容）
 const outputPath = [newFontPath].flat();
 outputPath?.map((path) =&gt; {
 res.download(path);
 });

 return result;
}

// 输出映射关系到单独的文件中
function saveRule(rule) {
 fs.writeFileSync(&#x27;rule.json&#x27;, JSON.stringify(rule, null, 4));
}

export { generateFont, saveRule };
</code></pre>

 <h2>
 
 注意点
 
 </h2>
 有一些需要注意的地方

 <h3>
 
 unicode值
 
 </h3>
 一些资料中表述：在采用NCR时，数字取值为8192-8303（十六进制为<code>2000</code>-<code>206F</code>），但实测255-65535均可以使用

 <h3>
 
 无法复用旧的Glyph
 
 </h3>
 在上述代码中
<pre><code class="hljs language-js">// ...
return new opentype.Glyph({
 index: index + 1,
 unicode,
 name: word,
 path,
 advanceWidth: glyph.advanceWidth,
});
// ...
</code></pre>
需要新生成一个<code>Glyph</code>，只能复用老的<code>Glyph</code>的一些参数

 <h2>
 
 总结
 
 </h2>
 字体都是由一个个字符组成，每个字符都有自己对应的字形参数。我们可以基于源字体，提取出特定的字符，调整该字符对应的字形，最后生成一套新的字体

 <h2>
 
 参考
 
 </h2>
 <a href="https://opentype.js.org/">opentype</a>

要想实现字体反爬虫，首先要有字体，那么如何制作字体呢

## 原理

一套字体是由多个字符组成，每个字符都有对应的字形，字形是由一系列`command`（类似svg）

![制作字体](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1b9fa3afe7d47dca17108785cc87800~tplv-k3u1fbpfcp-zoom-1.

生成自定义（unicode、字形）字体

<h2>
 
 WHAT
 
 </h2>
 一个CSS属性
使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏
起初是SVG里的，后挪用到CSS
<pre><code class="hljs language-css">/* Keyword values */
clip-path: none;

/* &lt;clip-source&gt; values */
clip-path: url(resources.svg);

/* &lt;basic-shape&gt; values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(&#x27;M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z&#x27;);
</code></pre>

 <h2>
 
 WHY
 
 </h2>
 方便创建一些不规则的图形，如切角、内切圆角、箭头等

 <h2>
 
 HOW
 
 </h2>
 DEMO使用<code>clip-path: path()</code>来创建
<code>path</code>类似于svg的<code>path</code>标签，使用一系列 命令+参数 的序列来创建形状
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/path.png" alt="SVG-PATH">
<a href="https://yqnn.github.io/svg-path-editor/">可视化编辑</a>
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;style&gt;
 .img {
 height: 140px;
 width: 280px;
 background: linear-gradient(90deg, #be0f2d, #cb364a, #f5abb7);
 }

 .popover {
 clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 50% 100%, 25% 75%, 0% 75%);
 }

 .message {
 clip-path: path(&#x27;M 20 0 L 260 0 A 20 20 90 0 1 280 20 L 280 100 A 20 20 90 0 1 260 120 L 220 120 L 240 140 L 180 120 L 20 120 A 20 20 90 0 1 0 100 L 0 20 A 20 20 90 0 1 20 0&#x27;);
 }

 .coupon {
 clip-path: path(&#x27;M 20 0 L 260 0 A 20 20 0 0 0 280 20 L 280 120 A 20 20 0 0 0 260 140 L 20 140 A 20 20 0 0 0 0 120 L 0 20 A 20 20 0 0 0 20 0&#x27;);
 }

 .notching {
 clip-path: path(&#x27;M 40 0 L 280 0 L 280 100 L 240 140 L 0 140 L 0 40 L 40 0&#x27;);
 }

 .outside-circle {
 clip-path: path(&#x27;M 40 0 L 240 0 A 20 20 90 0 1 260 20 L 260 120 A 20 20 90 0 0 280 140 L 0 140 A 20 20 90 0 0 20 120 L 20 20 A 20 20 90 0 1 40 0&#x27;);
 }
 &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;div src=&quot;https://bennettfeely.com/clippy/pics/pittsburgh.jpg&quot; alt=&quot;&quot; class=&quot;img popover&quot; srcset=&quot;&quot;&gt;&lt;/div&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;div src=&quot;https://bennettfeely.com/clippy/pics/pittsburgh.jpg&quot; alt=&quot;&quot; class=&quot;img message&quot; srcset=&quot;&quot;&gt;&lt;/div&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;div src=&quot;https://bennettfeely.com/clippy/pics/pittsburgh.jpg&quot; alt=&quot;&quot; class=&quot;img coupon&quot; srcset=&quot;&quot;&gt;&lt;/div&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;div src=&quot;https://bennettfeely.com/clippy/pics/pittsburgh.jpg&quot; alt=&quot;&quot; class=&quot;img notching&quot; srcset=&quot;&quot;&gt;&lt;/div&gt;
 &lt;br /&gt;
 &lt;br /&gt;
 &lt;div src=&quot;https://bennettfeely.com/clippy/pics/pittsburgh.jpg&quot; alt=&quot;&quot; class=&quot;img outside-circle&quot; srcset=&quot;&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/clip-path.png" alt="clip-path">

## WHAT

一个CSS属性

使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏

起初是SVG里的，后挪用到CSS

``` css
/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg);

/* <basic-shape> value

CSS学习-clip path

让我们从实现两个简单的hook入手来探究hooks原理

> [示例代码](https://github.com/mrrs878/review)

## useState

`useState`用于在函数式组件中声明并保存一个变量，`useState`的使用是这样的：

``` ts
const [count, setCount] = useState(0);

console.log(cou

React.js学习-hooks原理简析

<h2>
 
 起因
 
 </h2>
 周末玩游戏的时候发现游戏内有一个按钮的交互挺有趣，类似于这种效果
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/button-svg.gif" alt="button-svg">
点击后边框有一个进度条，鼠标长按进度会增加，抬起后回到起始位置
咦，有点意思
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/interesting.gif" alt="因垂斯汀">
于是就想着能不能使用前端的一些技术实现🤔
于是开始一系列的尝试（此处省略若干字），发现触及到知识盲区了😭，根本无从下手
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/interesting2.png" alt="知识盲区">

 <h2>
 
 转机
 
 </h2>
 突然不知道怎么就想到SVG了，想着要不试试？没准能行，然后一顿搜索，眼前一亮
有大佬使用<code>stroke</code>和<code>stroke-dashoffset</code>及<code>stroke-dasharray</code>做出进度条，同时又想到SVG可以和JavaScript交互，貌似可以实现我的需求
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/interesting3.png" alt="奇怪的知识增加了">

 <h2>
 
 stork-dashoffset和stork-dasharray
 
 </h2>
 那么<code>stroke</code>和<code>stroke-dashoffset</code>以及<code>stroke-dasharray</code>是何方神圣腻？🤔
<code>stroke</code>: 描边，接受一个颜色值。可作用于大部分SVG元素
<code>stroke-dasharray</code>: 用于创建虚线描边
<pre><code class="hljs language-js">// 表示：虚线长10，间距10，然后重复 虚线长10，间距10
stroke-dasharray = &#x27;10&#x27;

// 表示：虚线长10，间距5，然后重复 虚线长10，间距5
stroke-dasharray = &#x27;10, 5&#x27;

// 当然还有更复杂的设置这里就不细讲了
</code></pre>
<code>stroke-dashoffset</code>：字如其意，表示stroke的偏移。这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位
需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
<code>stroke-dashoffset</code>要搭配<code>stroke-dasharray</code>才能看得出来效果，非虚线的话，是无法看出偏移的。
概念有点抽象，来看一个MDN的例子，图中红线段是偏移的距离
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/stroke-dashoffset.png" alt="stroke-dashoffset">
上图效果分别是：
<ol>
<li>没有虚线</li>
<li><code>stroke-dasharray=&quot;3 1&quot;</code> ，虚线没有设置偏移，也就是stroke-dashoffset值为0</li>
<li><code>stroke-dashoffset=&quot;3&quot;</code>，偏移正数，虚线整体左移了3个单位，图中3后面的红线段，就是起始线段，线段之后是1个单位的间隔，我们可见区域从这个间隔开始，然后循环 3-1,3-1的虚线-间隔-虚线-间隔</li>
<li><code>stroke-dashoffset=&quot;-3&quot;</code>，偏移负数，虚线整体右移动了3个单位，由于dasharray 是循环的，前面偏移的位置会有dasharray 填充上</li>
<li><code>stroke-dashoffset=&quot;1&quot;</code>，偏移正数，虚线整体左移了1个单位，最终呈现出来的效果跟 线段4 一样</li>
</ol>
利用这两个属性，我们可以做出好看的动画效果
<ol>
<li>设置<code>stroke-dasharray</code>为图形边长
</li>
<li>设置<code>stroke-dashoffset</code>为图形边长
</li>
<li>动态减少<code>stroke-dashoffset</code>到0
</li>
</ol>
简析：第一步后就有一个长度为图形边长的长条，第二步由于设置了<code>stroke-dashoffset</code>也为图形边长，因此长条会被推到不可见的位置，再通过第三步中动态减少<code>stroke-dashoffset</code>，第一步中绘制的长条就会慢慢增长并显示出来

 <h2>
 
 再次挑战
 
 </h2>
 刚开始是想使用<code>rect</code>来做的，但发现游戏中的按钮是有一定的圆角的，<code>rect</code>在设置圆角之后再添加<code>storke</code>有点丑，遂放弃，改用<code>path</code>实现
观察原图，实现思路如下：
<ol>
<li>边框可以使用<code>path</code>绘制出来
</li>
<li>边框背景也使用<code>path</code>绘制（同一套<code>d</code>属性），设置一下<code>opacity</code>即可
</li>
<li>背景色使用SVG的<code>fill</code>填充出来
</li>
<li>文字使用<code>text</code>绘制
</li>
</ol>
实现代码如下：
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
 &lt;title&gt;SVG&lt;/title&gt;
 &lt;style&gt;
 #svg:active {
 opacity: 0.9;
 }
 #path, #background {
 stroke-width: 3;
 stroke: #f00;
 cursor: pointer;
 
 /** 
 * 修正位置，设置水平垂直居中
 */
 transform: translate(5px, 5px);
 }
 #background {
 opacity: 0.2;
 }
 #text {
 user-select: none;
 cursor: pointer;
 fill: #000;
 
 /** 
 * 设置水平垂直居中
 */
 dominant-baseline: middle;
 text-anchor: middle;
 }
 &lt;/style&gt;
 &lt;script&gt;
 let rafId = -1;
 const WIDTH = 70;
 const HEIGHT = 30;
 const RADIUS = 6;
 const DEFAULT_OFFSET = 15;
 const STORK_LENGTH = (WIDTH + HEIGHT) &lt;&lt; 1;
 const STEP = 5;

 /**
 * @description: 生成带有圆角的path
 */
 function roundedRect(w, h, tlr, trr, brr, blr) {
 return `M 0 ${tlr} A ${tlr} ${tlr} 0 0 1 ${tlr} 0 L ${w - trr} 0 `
 + `A ${trr} ${trr} 0 0 1 ${w} ${trr} L ${w} ${h - brr} `
 + `A ${brr} ${brr} 0 0 1 ${w - brr} ${h} L ${blr} ${h} `
 + `A ${blr} ${blr} 0 0 1 0 ${h - blr} Z`;
 }

 function animation() {
 const path = document.querySelector(&#x27;#path&#x27;);
 const preOffset = path.getAttribute(&#x27;stroke-dashoffset&#x27;);
 const newOffset = preOffset - STEP;
 path.setAttribute(&#x27;stroke-dashoffset&#x27;, newOffset);
 if (newOffset &gt;= 0) {
 rafId = window.requestAnimationFrame(animation);
 } else {
 path.setAttribute(&#x27;stroke-dashoffset&#x27;, STORK_LENGTH - DEFAULT_OFFSET);
 alert(&#x27;success&#x27;);
 }
 }

 function onMouseDown() {
 rafId = window.requestAnimationFrame(animation);
 }

 function onMouseUp() {
 window.cancelAnimationFrame(rafId);
 path.setAttribute(&#x27;stroke-dashoffset&#x27;, STORK_LENGTH - DEFAULT_OFFSET);
 }

 window.addEventListener(&#x27;load&#x27;, () =&gt; {
 const path = document.querySelector(&#x27;#path&#x27;);
 const background = document.querySelector(&#x27;#background&#x27;);
 path.setAttribute(&#x27;stroke-dashoffset&#x27;, STORK_LENGTH - DEFAULT_OFFSET);
 path.setAttribute(&#x27;stroke-dasharray&#x27;, STORK_LENGTH);

 const roundedPath = roundedRect(WIDTH, HEIGHT, RADIUS, RADIUS, RADIUS, RADIUS);
 path.setAttribute(&#x27;d&#x27;, roundedPath);
 background.setAttribute(&#x27;d&#x27;, roundedPath);
 });
 &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;svg id=&quot;svg&quot; width=&quot;80&quot; height=&quot;40&quot; fill=&quot;#ccc&quot; onmousedown=&quot;onMouseDown()&quot; onmouseup=&quot;onMouseUp()&quot;
 xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
 &lt;path id=&quot;path&quot;&gt;&lt;/path&gt;
 &lt;path id=&quot;background&quot;&gt;&lt;/path&gt;
 &lt;text id=&quot;text&quot; x=&quot;40&quot; y=&quot;20&quot;&gt;click me&lt;/text&gt;
 &lt;/svg&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
最终效果
<img src="https://mrrs878.github.io/awesome/static/img/button.gif" alt="最终效果">
<a href="https://mrrs878.github.io/awesome/interactive-button/index.html">在线体验</a>
参考：
<a href="https://www.cnblogs.com/daisygogogo/p/11044353.html">SVG学习之stroke-dasharray 和 stroke-dashoffset 详解</a>

## 起因

周末玩游戏的时候发现游戏内有一个按钮的交互挺有趣，类似于这种效果

![button-svg](https://mrrsblog.oss-cn-shanghai.aliyuncs.com/button-svg.gif)

点击后边框有一个进度条，鼠标长按进度会增加，抬起后回到起始位置

咦，有点意思

![因垂斯汀](https://mrrsblog.oss-cn-shangha

SVG学习-stroke-dashoffset和stroke-dasharray

<code>never</code> 类型是 TypeScript 中的底层类型。一些例子：
<ul>
<li>一个从来不会有返回值的函数（如：如果函数内含有 <code>while(true) {}</code>）；</li>
<li>一个总是会抛出错误的函数（如：<code>function foo() { throw new Error(&#39;Not Implemented&#39;) }</code>，<code>foo</code> 的返回类型是 <code>never</code>）；</li>
</ul>
使用场景：详细的返回值检查
<pre><code class="hljs language-ts">function foo(x: string | number): boolean {
 if (typeof x === &#x27;string&#x27;) {
 return true;
 } else if (typeof x === &#x27;number&#x27;) {
 return false;
 }

 // 如果不是一个 never 类型，这会报错：
 // - 不是所有条件都有返回值 （严格模式下）
 // - 或者检查到无法访问的代码
 // 但是由于 TypeScript 理解 `fail` 函数返回为 `never` 类型
 // 它可以让你调用它，因为你可能会在运行时用它来做安全或者详细的检查。
 return fail(&#x27;Unexhaustive&#x27;);
}

function fail(message: string): never {
 throw new Error(message);
}
</code></pre>
与 <code>void</code> 的差异：
<code>never</code> 表示一个从来不会优雅的返回的函数时，你可能马上就会想到与此类似的 <code>void</code>，然而实际上，<code>void</code> 表示没有任何类型，<code>never</code> 表示永远不存在的值的类型。
当一个函数返回空值时，它的返回值为 <code>void</code> 类型，但是，当一个函数永不返回时（或者总是抛出错误），它的返回值为 <code>never</code> 类型。<code>void</code> 类型可以被赋值（在 <code>strictNullChecking</code> 为 <code>false</code>时），但是除了 <code>never</code> 本身以外，其他任何类型不能赋值给 <code>never</code>

`never` 类型是 TypeScript 中的底层类型。一些例子：

- 一个从来不会有返回值的函数（如：如果函数内含有 `while(true) {}`）；
- 一个总是会抛出错误的函数（如：`function foo() { throw new Error('Not Implemented') }`，`foo` 的返回类型是 `never`）；

使用场景：详细的返回值检查
``` t

typescript学习-拾遗

<h2>
 
 模块
 
 </h2>
 TypeScript 与 ES6 一样，任何包含顶级 <code>import</code> 或者 <code>export</code> 的文件都被当成一个模块。相反地，如果一个文件不带有顶级的 <code>import</code> 或者 <code>export</code> 声明，那么它的内容被视为全局可见的。
例如我们在在一个 TypeScript 项目下任意文件中（不带有 <code>export</code> / <code>import</code> ）声明一个变量 <code>a</code> 。然后在另一个文件同样声明一个变量 <code>a</code> ，这时候会出现错误信息：
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/namespace-0.png" alt="重复声明">
如果需要解决这个问题，则通过import或者export引入模块系统即可，具体不再赘述。

 <h2>
 
 命名空间
 
 </h2>
 命名空间一个最明确的目的就是解决重名问题
命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的
这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中
TypeScript 中命名空间使用 <code>namespace</code> 来定义，语法格式如下：
<pre><code class="hljs language-ts">namespace Util {
 export const sum = (a: number, b: number) =&gt; a + b;
}

namespace Tools {
 export const sub = (a: number, b: number) =&gt; a - b;
}

console.log(Tools.sub(3, 4));
</code></pre>
命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性，上述代码编译后如下：
<pre><code class="hljs language-js">var Util;
(function (Util) {
 Util.sum = function (a, b) { return a + b; };
})(Util || (Util = {}));
var Tools;
(function (Tools) {
 Tools.sub = function (a, b) { return a - b; };
})(Tools || (Tools = {}));
</code></pre>

 <h2>
 
 区别
 
 </h2>
 <ul>
<li>命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象，使用起来十分容易。但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中
</li>
<li>像命名空间一样，模块可以包含代码和声明。不同的是模块可以声明它的依赖
</li>
<li>在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编辑器/IDE编写代码的时候参考使用
</li>
</ul>

## 模块

TypeScript 与 ES6 一样，任何包含顶级 `import` 或者 `export` 的文件都被当成一个模块。相反地，如果一个文件不带有顶级的 `import` 或者 `export` 声明，那么它的内容被视为全局可见的。

例如我们在在一个 TypeScript 项目下任意文件中（不带有 `export` / `import` ）声明一个变量 `a` 。然后在另一个文

typescript学习-命名空间&模块

<h2>
 
 盒模型
 
 </h2>
 描述了元素如何显示，以及（在一定程度上）如何相互作用、相互影响。页面中的所有元素都被看作为一个矩形盒子，这个盒子包含元素的内容、内边距、边框、外边距。
盒模型分为两种：
<ul>
<li>标准盒模型（box-sizing = content-box）
width = content-width
height = content-height
</li>
<li>IE盒模型（box-sizing = border-box）
width = content-width + padding + border
height = content-height + padding + border
</li>
</ul>

 <h2>
 
 层叠上下文
 
 </h2>
 层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的z-index值是相对于该父元素而不是 <code>document root</code> 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的<code>z-index</code>值，元素 C 也永远不会在元素 B 之上.
CSS 中的<code>z-index</code>属性控制重叠元素的垂直叠加顺序。<code>z-index</code>只能影响<code>position</code>值不是<code>static</code>的元素。
产生层叠上下文：
<ol>
<li>HTML中的根元素<code>&lt;html&gt;&lt;/html&gt;</code>本身就具有层叠上下文，称为根层叠上下文。
</li>
<li>普通元素设置<code>position</code>属性为非<code>static</code>值并设置<code>z-index</code>属性为具体数值，产生层叠上下文。
</li>
<li>CSS3中的新属性也可以产生层叠上下文。
</li>
<li><ul>
<li>父元素的display属性值为<code>flex|inline-flex</code>，子元素<code>z-index</code>属性值不为<code>auto</code>的时候，子元素为层叠上下文元素；</li>
<li>元素的<code>opacity</code>属性值不是1；</li>
<li>元素的<code>transform</code>属性值不是<code>none</code>；</li>
<li>元素<code>mix-blend-mode</code>属性值不是normal；</li>
<li>元素的<code>filter</code>属性值不是<code>none</code>；</li>
</ul>
</li>
</ol>
<img src="https://mrrsblog.oss-cn-shanghai.aliyuncs.com/z-index.png" alt="z-index">

 <h2>
 
 link标签的rel属性
 
 </h2>
 <ul>
<li><code>preload</code>
让你在你的HTML页面中<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head">head</a>标签内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
</li>
<li><code>prefetch</code>
提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。
</li>
</ul>

## 盒模型

描述了元素如何显示，以及（在一定程度上）如何相互作用、相互影响。页面中的所有元素都被看作为一个矩形盒子，这个盒子包含元素的内容、内边距、边框、外边距。

盒模型分为两种：

- 标准盒模型（box-sizing = content-box）

  width = content-width

  height = content-height

- IE盒模型（box-sizi

CSS相关-0

<h2>
 
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a>
 
 </h2>
 <code>Proxy</code>用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta program），即对编程语言进行编程。<code>Proxy</code>可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

 <h2>
 
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect">Reflect</a>
 
 </h2>
 **WHAT **😳
ES6为了操作对象而提供的新的API
WHY 🤔
<ol>
<li>将<code>Object</code>对象的一些明显是语语言内部的方法（比如<code>Object.defineProperty</code>）放到<code>Reflect</code>对象上，现阶段，某些方法同时在<code>Object</code>和<code>Reflect</code>对象上部署，未来的新方法只部署在<code>Reflect</code>对象上。也就是说，从<code>Reflect</code>对象上可以拿到语言内部的方法</li>
<li>修改某些<code>Object</code>方法的返回结果，让其变得更合理。比如<code>Object.defineProperty(obj, name, desc)</code>在无法定义属性时，会抛出一个错误，而<code>Reflect.defineProperty(obj, name, desc)</code>则会返回<code>false</code></li>
<li>让<code>Object</code>操作都变成函数行为。某些<code>Object</code>操作是命令式，比如<code>name in obj</code>和<code>delete obj[name]</code>，而<code>Reflect.has(obj, name)</code>和<code>Reflect.deleteProperty(obj, name)</code>让它们变成了函数行为</li>
<li><code>Reflect</code>对象的方法与<code>Proxy</code>对象的方法一一对应，这就让<code>Proxy</code>对象可以方便地调用对应的<code>Reflect</code>方法，完成默认行为</li>
</ol>
HOW 😮
<code>Reflect</code>对象一共有13个静态方法
<pre><code class="hljs language-js">// 适用于函数定义了自己的 apply 方法
Reflect.apply(target, thisArg, args)
// 等同于new target(...args) 这提供了一种不使用 new 来调用构造函数的方法
Reflect.construct(target, args)

Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.defineProperty(target, name, desc)

Reflect.deleteProperty(target, name)

Reflect.has(target, name)
// 基本等同于Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和
Reflect.ownKeys(target)

Reflect.isExtensible(target)

Reflect.prevenExtensions(target)

Reflect.getOwnPropertyDescriptor(target, name)

Reflect.getPrototypeOf(target)

Reflect.setPrototypeOf(target, prototype)
</code></pre>
<code>Reflect</code> + <code>Proxy</code>实现观察者模式
<pre><code class="hljs language-js">const observers = new Set()
function observe(fn) {
 observers.add(fn)
}
function observable(obj) {
 return new Proxy(obj, {
 set(target, key, value, receiver) {
 const result = Reflect.set(target, key, value, receiver)
 observers.forEach(observer =&gt; observer())
 return result
 }
 })
}

const person = observable({
 name: &quot;tom&quot;,
 age: 23
})
function print() {
 console.log(`${ person.name }, ${ person.age }`)
}
observe(print)
person.name = &quot;tom1&quot; 
</code></pre>
📣 在观察者模式中，观察者是知道被观察者的，被观察者一一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在，它们只有通过消息代理进行通信。在发布订阅模式中，组件时松散耦合的，正和观察者模式相反。观察者模式大多时候是同步的，比如当事件触发，被观察者就会调用观察者的方法；而发布订阅模式大多时候是异步的（使用消息队列）

 <h2>
 
 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>
 
 </h2>
 WHAT 😳
<code>ES6</code>引入的一种新的原始数据类型，表示独一无二的值。它是<code>JavaScript</code>语言的第七种数据类型，前六种是：<code>undefined</code>、<code>null</code>、<code>Boolean</code>、<code>String</code>、<code>Object</code>、<code>Number</code>
📣 不支持 <code>new Symbol()</code>
WHY 🤔
ES5的对象属性名都是字符串，这容易造成属性名的冲突。Symbol值可作为对象属性名
HOW 😮
Symbol值通过<code>Symbol</code>函数生成
<pre><code class="hljs language-js">const nameProperty = Symbol(&quot;name&quot;)
let a = {
 [nameProperty]: &quot;a&quot;,
 age: 21
}

console.log(Object.getOwnPropertyNames(a))
for (const key in a) {
 if (a.hasOwnProperty(key)) {
 const element = a[key];
 console.log(key);
 }
}
console.log(Reflect.ownKeys(a));
</code></pre>
API:
<ul>
<li><code>Symbol.description</code>
创建<code>Symbol</code>的时候，可以添加一个描述，但读取这个描述需要将<code>Symbol</code>显式转为字符串。<code>Symbol.description</code>可以方便的读取<code>Symbol</code>对应的描述
<pre><code class="hljs language-js">const nameProp = Symbol(&quot;name&quot;)
nameProp.toString()
console.log(nameProp.description)
</code></pre>
</li>
<li><code>Symbol.for</code>
重新使用同一个<code>Symbol</code>值。<code>Symbol.for</code>接受一个字符串作为参数，然后全局搜索有没有以该参数作为名称的Symbol值，若有，返回之；若没有，创建之
<code>Symbol.for(&quot;name&quot;)</code>和<code>Symbol(&quot;name&quot;)</code>的区别：两者都会生成<code>Symbol</code>值；前者会被登记在全局环境中供搜索，后者不会
<pre><code class="hljs language-js">Symbol(&quot;name&quot;) === Symbol(&quot;name&quot;)
// false
Symbol.for(&quot;name&quot;) === Symbol.for(&quot;name&quot;)
// true
</code></pre>
</li>
<li><code>Symbol.keyFor</code>
返回一个已登记的<code>Symbol</code>的<code>key</code>
<pre><code class="hljs language-js">console.log(Symbol.keyFor(Symbol(&quot;name&quot;)));
console.log(Symbol.keyFor(Symbol.for(&quot;name&quot;)));
// undefined
// name
</code></pre>
</li>
</ul>

 <h2>
 
 Set
 
 </h2>
 WHAT 😳
ES6提供的一种数据结构，类似于数组，但成员的值都是唯一的，没有重复的值
Set使用一种类似于<code>===</code>的算法“Same-value-zero equality”来判断值是否相等
<pre><code class="hljs language-js">// &quot;5&quot; 和 5 不相等
// NaN 和 NaN 相等
// 两个空对象不相等
let set = new Set()
set.add(&quot;5&quot;)
set.add(5)
set.add(NaN)
set.add(NaN)
set.add({})
set.add({})
console.log(set);
// Set { &#x27;5&#x27;, 5, NaN, {}, {} }
</code></pre>
WHY 🤔
<ul>
<li>可以用作数组去重<code>[...new Set([1, 1, 2, 2, 3])]</code></li>
<li>去除字符串里面的重复字符<code>[...new Set(&#39;aaabbbc&#39;)].join(&quot;&quot;)</code></li>
</ul>
HOW 😮
<code>Set</code>函数可以接受一个数组（或具有interable接口的其他数据结构）作为参数，用来初始化

 <h2>
 
 Map
 
 </h2>
 WHAT 😳
ES6提供的一种数据结构，类似于对象，也是键-值对的集合，但键的范围不限于字符串，各章类型的值（包括对象）都可以作为键
WHY 🤔
传统上的Object只能用字符串（[Symbol](## Symbol)）作为键，这给它的使用带来了很大的限制
Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性和原作者的属性同名
HOW 😮
使用 <code>new Map</code> 来创建Map
<pre><code class="hljs language-js">const map = new Map([[2, &quot;2&quot;]])
map.set(1, &quot;1&quot;)
console.log(map.get(2));
</code></pre>
事实上，不仅仅是数组，任何具有<code>iterator</code>接口、且每个成员都是一个双元素的数组的数据结构都可以作为<code>Map</code>构造函数的参数

## [Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

`Proxy`用于**修改某些操作的默认行为**，等同于在语言层面做出修改，所以属于一种“元编程”（meta program），即对编程语言进行编程。`Proxy`可以理解成在目标对象之前架设一层

ES6重点-0

## 字符串新增方法

- `padStart`

  用于字符串长度补全，如果某个字符串长度不够指定长度会在头部或尾部补全

  ```js
  console.log('xxx'.padStart(4, 'ab'));
  console.log('x'.padStart(4, 'ab')); //补全位数，有需要会重复或截取
  console.log('x'.padStart(4));

ES6重点-1

HTML相关问题

<h2>
 
 事件委托 （event delegation）
 
 </h2>
 事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器，当触发子元素时，事件会冒泡到父元素，监听器就会触发，这种技术的好处是：
<ol>
<li>内存占用少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。</li>
<li>无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。</li>
</ol>

 <h2>
 
 JavaScript中的this指向
 
 </h2>
 简单来讲，<code>this</code>的指向取决于函数的调用方式
<ol start="0">
<li>如果是箭头函数，<code>this</code>被设置为调用时的上下文</li>
<li>如果使用<code>new</code>，函数内的<code>this</code>是一个全新的对象</li>
<li>如果<code>apply、call、bind</code>方法用于调用/创建一个函数，函数内的<code>this</code>就是作为参数传入这些方法的对象</li>
<li>当函数作为对象里的方法被调用时，函数内的<code>this</code>是调用该函数的对象，比如当<code>obj.method()</code>被调用时，函数内的<code>this</code>将绑定到<code>obj</code>对象</li>
<li>如果不符合上述规则，那么<code>this</code>的值指向全局对象<code>global object</code>，浏览器环境下<code>this</code>的值指向<code>window</code>对象，但在严格模式下<code>use strict</code>，<code>this</code>的值为<code>undefined</code></li>
<li>如果符合上述多个规则，从上到下权重依次递减</li>
</ol>

 <h2>
 
 原型继承 <code>prototypal inheritance</code>
 
 </h2>
 所有的JS对象都有一个<code>prototype</code>对象，指向它的原型对象，当试图访问一个对象的属性时，如果没有在该对象上找到它还会搜索该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或达到原型链的末尾。这种行为是在模拟经典的继承，但与其说时继承还不如说是委托<code>delegation</code>
读取对象的属性值时，会自动到原型链中查找
设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
<img src="./imgs/1581317824537.png" alt="原型">

 <h2>
 
 JavaScript的模块化机制
 
 </h2>
 <ul>
<li>AMD
Asynchronous Module Definition 异步模块加载机制，ReqireJS实现了AMD规范
<pre><code class="hljs language-javascript">//a.js
//define可以传入三个参数，分别是字符串-模块名、数组-依赖模块、函数-回调函数
define(function(){
 return 1;
})

// b.js
//数组中声明需要加载的模块，可以是模块名、js文件路径
require([&#x27;a&#x27;], function(a){
 console.log(a);// 1
});
</code></pre>
特点：
对于依赖的模块，AMD推崇依赖前置，提前执行，也就是说，在<code>define</code>方法里传入的依赖模块（数组）会在一开始就下载并执行。适合在浏览器端使用
</li>
<li>CommonJS
CommonJS规范为CommonJS小组所提出，目的是弥补JavaScript在服务器端缺少模块化机制，NodeJS、webpack都是基于该规范来实现的。
<pre><code class="hljs language-javascript">//a.js
module.exports = function () {
 console.log(&quot;hello world&quot;)
}

//b.js
var a = require(&#x27;./a&#x27;);

a();//&quot;hello world&quot;

//或者

//a2.js
exports.num = 1;
exports.obj = {xx: 2};

//b2.js
var a2 = require(&#x27;./a2&#x27;);

console.log(a2);//{ num: 1, obj: { xx: 2 } }
</code></pre>
特点：
<ul>
<li>所有代码都运行在模块作用域，不会污染全局作用域</li>
<li>模块是同步加载的，即只有加载完成才能执行后面的操作</li>
<li>模块在首次执行后就会缓存，再次加载只返回缓存结果，如果想要再次执行，可清除缓存</li>
<li><code>require</code>返回的是被输出的值的拷贝，模块内部的变化也不会影响这个值</li>
</ul>
</li>
<li>ES6 Module
ES6 Module是ES6中规定的模块体系
<pre><code class="hljs language-javascript">//a.js
var name = &#x27;lin&#x27;;
var age = 13;
var job = &#x27;ninja&#x27;;

export { name, age, job};

//b.js
import { name, age, job} from &#x27;./a.js&#x27;;

console.log(name, age, job);// lin 13 ninja

//或者

//a2.js
export default function () {
 console.log(&#x27;default &#x27;);
}

//b2.js
import customName from &#x27;./a2.js&#x27;;
customName(); // &#x27;default&#x27;
</code></pre>
特点（对比CommonJS）：
| | CommonJS | ES6 Module |
|
</li>
</ul>

## 事件委托 （event delegation）
事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器，当触发子元素时，事件会冒泡到父元素，监听器就会触发，这种技术的好处是：

1. 内存占用少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。
2. 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。

## JavaScript中

JavaScript相关-0

## document.write

`document.write()` 方法将一个文本字符串写入一个由 [`document.open()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/open) 打开的文档流（document stream）。（[MDN](https://developer.mozilla.org

JavaScript相关-1

<h2>
 
 执行上下文
 
 </h2>
 
 <h3>
 
 什么是执行上下文
 
 </h3>
 执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念。JavaScript中任何的代码都是在执行上下文中运行。
执行上下文创建过程中，需要做以下几件事：
<ol>
<li>创建变量对象：首先初始化函数的参数<code>arguments</code>，提升变量声明和函数声明</li>
<li>创建作用域链（<code>scope chain</code>）：在执行上下文的创建阶段，作用域链是在变量对象之后创建的</li>
<li>确定<code>this</code>的值，即<code>resolve thisbinding</code></li>
</ol>
每个执行上下文中都有三种重要的属性：
<ul>
<li>变量对象（VO），包含变量、函数声明和函数的形参，该属性只能在全局执行上下文中访问（函数执行上下文中为AO）</li>
<li>作用域链（<code>scope chain</code>），JavaScript采用词法作用域，也就是说变量的作用域实在定义的时候就决定了，包含自身变量对象和上级变量对象的列表，通过<code>[[Scope]]</code>属性查找上级变量</li>
<li><code>this</code></li>
</ul>

 <h3>
 
 执行上下文的分类
 
 </h3>
 <ul>
<li>全局执行上下文</li>
<li>函数执行上下文</li>
</ul>

 <h2>
 
 执行栈
 
 </h2>
 执行栈，也叫做调用栈，具有LIFO结构，用于存储在代码执行期间创建的所有执行上下文
有如下规则：
<ul>
<li>首次运行JavaScript代码的时候会创建一个全局执行的上下文并push到当前的执行栈中，每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并push当前执行栈的栈顶</li>
<li>当栈顶的函数运行完成后，其对应的函数执行上下文将会从执行栈中pop，上下文的控制权移动到当前执行栈的下一个执行上下文</li>
</ul>

 <h2>
 
 作用域
 
 </h2>
 作用域负责收集和维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限
作用域有两种工作模型：词法作用域和动态作用域。JavaScript采用的时词法作用域，词法作用域意味着作用域是由书写代码时变量和函数声明的位置决定的。

 <h3>
 
 作用域的分类
 
 </h3>
 <ul>
<li>全局作用域</li>
<li>函数作用域</li>
<li>块级作用域</li>
</ul>

 <h3>
 
 作用域链
 
 </h3>
 作用域链就是从当前作用域开始一层一层向上寻找某个变量，直到全局作用域链

 <h2>
 
 变量提升
 
 </h2>
 通俗解释：
将声明的代码移动到了顶部
准确解释：👍
<ol>
<li>在生成执行上下文时，具体步骤是创建VO，JavaScript解释器会找出需要提升的变量和函数，并且给它们提前在内存中开辟好空间，函数的话会将整个函数存入内存，变量之生命并且赋值为<code>undefined</code></li>
<li>代码执行阶段（可以直接使用变量/函数）</li>
</ol>

 <h2>
 
 防抖
 
 </h2>
 在一定时间多次触发但内只调用一次
<pre><code class="hljs language-javascript">function debounce (func, wait = 50, immediate = true) {
 let timer, context, args;

 const later = () =&gt; setTimeout(() =&gt; {
 timer = null
 if (!immediate) {
 func.apply(context, args)
 }
 }, wait)

 return function (...params) {
 if (timer) {
 clearTimeout(timer)
 timer = later()
 } else {
 timer = later()
 if (immediate) {
 func.apply(this, params)
 } else {
 context = this
 args = params
 }
 }
 }
}
</code></pre>

 <h2>
 
 可迭代对象
 
 </h2>
 ES6规定，默认的<code>Iterator</code>接口部署在数据结构的<code>Symbol.iterator</code>属性上，换个角度，也可以认为一个数据结构只要具有<code>Symbol.iterator</code>属性那么就可以认为其是可迭代的

 <h3>
 
 可迭代对象的特点
 
 </h3>
 <ul>
<li>具有<code>Symbol.iterator</code>属性，返回的是一个遍历器对象</li>
<li>可以使用<code>for...of</code>循环遍历</li>
<li>可以通过<code>Array.from</code>转换为数组</li>
</ul>

 <h3>
 
 原生具有<code>Iterator</code>接口的数据结构
 
 </h3>
 <ul>
<li>Array</li>
<li>Map</li>
<li>Set</li>
<li>String</li>
<li>TypedArray</li>
<li>函数的arguments对象</li>
<li>NodeList对象</li>
</ul>

## 执行上下文

### 什么是执行上下文

执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念。JavaScript中任何的代码都是在执行上下文中运行。

执行上下文创建过程中，需要做以下几件事：

1. 创建变量对象：首先初始化函数的参数`arguments`，提升变量声明和函数声明
2. 创建作用域链（`scope chain`）：在执行上下文的创建阶段，作用域链

JavaScript相关-3

<h2>
 
 模拟实现call、apply
 
 </h2>
 实现思路：
<ul>
<li>不传入第一个参数，那么默认为<code>window</code></li>
<li>改变了<code>this</code>指向，让新对象可以执行该函数，那个思路可以变成给新对象添加一个函数，然后在执行完成之后删除</li>
</ul>
<pre><code class="hljs language-javascript">Function.prototype.myCall = function (context) {
 context = context || window
 context.fn = this
 const args = [...arguments].slice(1)
 const result = context.fn(...args)
 delete context.fn
 return result
}

Function.prototype.myApply = function(context) {
 context = context || window
 context.fn = this
 const result = arguments[1] ? context.fn(...arguments[1]) : context.fn()
 delete context.fn
 return result
}

Function.prototype.myBind = function(context) {
 if (typeof this !== &#x27;function&#x27;)
 throw new TypeError(&quot;error&quot;)
 const that = this
 const args = [...arguments].slice(1)
 return function F() {
 if (this instanceof F) {
 return new that(...args, ...arguments)
 }
 return that.apply(context, args.concat(...arguments))
 }
}

const tom = {
 name: &quot;tom&quot;,
 say (tmp1, tmp2) {
 console.log(this.name, tmp1, tmp2);
 }
}
const jack = {
 name: &quot;jack&quot;
}

tom.say.myCall(jack, &quot;111&quot;, &quot;222&quot;)
tom.say.call(jack, &quot;111&quot;, &quot;222&quot;)

tom.say.myApply(jack, [&quot;111&quot;, &quot;222&quot;])
tom.say.apply(jack, [&quot;111&quot;, &quot;222&quot;])

tom.say.myBind(jack)(&quot;111&quot;, &quot;222&quot;)
tom.say.bind(jack)(&quot;111&quot;, &quot;222&quot;)

// jack 111 222
// jack 111 222
// jack 111 222
// jack 111 222
// jack 111 222
// jack 111 222
</code></pre>

 <h2>
 
 Promise 实现
 
 </h2>
 <code>Promise</code>是ES6新增的语法，解决了回调地狱的问题。可以把<code>Promise</code>看作是一个状态机，可以通过函数<code>resolve</code>和<code>reject</code>将状态转变为<code>resolved</code>或<code>rejected</code>，状态一旦转变就不能再次变化
<code>then</code>函数会返回一个新的<code>Promise</code>实例。因为<code>Promise</code>规范规定除了<code>pending</code>状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个<code>then</code>调用就失去意义了
对于<code>then</code>，本质上可以把它看成是<code>flatMap</code>

 <h2>
 
 Proxy
 
 </h2>
 proxy是ES6中新增的功能，用来定义对象中的操作
<pre><code class="hljs language-javascript">function onwatch(obj, setBind, getLogger) {
 const handler = {
 get(target, property, receiver) {
 getLogger(target, property)
 return Reflect.get(target, property, receiver)
 },
 set(target, property, value) {
 setBind(target, property, value)
 return Reflect.set(target, property, value)
 }
 }
 return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onwatch(obj, (target, property, value) =&gt; {
 console.log(`set ${ property } = ${ value }`);
}, (target, property) =&gt; {
 console.log(`get ${ property } = ${ target[property] }`);
})

p.a = 2
console.log(p.a);

// set a = 2
// get a = 2
</code></pre>

 <h2>
 
 正则表达式
 
 </h2>
 元字符
| 元字符 | 作用 |
| :

## 模拟实现call、apply

实现思路：

- 不传入第一个参数，那么默认为`window`
- 改变了`this`指向，让新对象可以执行该函数，那个思路可以变成给新对象添加一个函数，然后在执行完成之后删除

``` javascript
Function.prototype.myCall = function (context) {
  context = context || wi

JavaScript相关-4

<h1>
 
 MySQL-视图
 
 </h1>
 
 <h2>
 
 什么是视图
 
 </h2>
 <ul>
<li>视图是由查询结果形成的一张虚拟表，可以当作一张表使用，但与持久表(permanent table)不同的是，视图中的数据没有实际的物理存储。</li>
</ul>

 <h2>
 
 视图的作用
 
 </h2>
 <ul>
<li>视图在一定程度上起到一个安全层的作用，可以进行权限控制</li>
<li>简化查询语句</li>
<li>对于某张很大的表，可以将其分为多个视图，从而加快查询</li>
</ul>

 <h2>
 
 视图的使用条件
 
 </h2>
 <ul>
<li>如果某个查询结果出现的非常频繁，就是要经常那这个查询结果来做子查询，使用视图会更加方便</li>
</ul>

 <h2>
 
 视图的基本操作
 
 </h2>
 <ul>
<li>创建视图：
``` SQL
CREATE
[OR REPLACE]
[ALGORITHM = {UNDEFINED | MERGE | TEMPTABLE}]
[DEFINER = { user | CURRENT_USER }]
[SQL SECURITY { DEFINER | INVOKER }]
VIEW view_name [(column_list)]
AS select_statement
[WITH [CASCADED | LOCAL] CHECK OPTION]</li>
</ul>
CREATE OR REPLACE VIEW view_name AS SELECT * FROM table_name
<pre><code>- **调取视图**
``` SQL
SELECT * FROM view_name
</code></pre>
<ul>
<li>修改视图
``` SQL
ALTER
[ALGORITHM = {UNDEFINED | MERGE | TEMPTABLE}]
[DEFINER = { user | CURRENT_USER }]
[SQL SECURITY { DEFINER | INVOKER }]
VIEW view_name [(column_list)]
AS select_statement
[WITH [CASCADED | LOCAL] CHECK OPTION]</li>
</ul>
ALTER OR REPLACE VIEW view_name AS SELECT * FROM table_name
<pre><code>- **删除视图**
``` SQL
DROP VIEW IF EXISTS view_name
</code></pre>
<ul>
<li>查看视图<pre><code class="hljs language-SQL">SHOW TABLES;
</code></pre>
</li>
<li>查看视图的定义<pre><code class="hljs language-SQL">SHOW TABLE STATUS FROM table_name LIKE &#x27;view_name&#x27;
</code></pre>

 <h2>
 
 视图的算法--存在两种执行的算法
 
 </h2>
 </li>
<li>MERGE：合并模式，先将我们视图的SQL语句与外部查询视图的SQL语句，混合在一起，最终执行，也就是可以更新真实表中的数据。</li>
<li>TEMPTABLE：临时表模式，每当查询的时候，将视图所使用的SELECT语句生成一个结果的临时表，再在当前的临时表内进行查询。</li>
<li>UNDEFINED： 让MySQL选择所要使用的算法。如果可能，它倾向于MERGE而不是TEMPTABLE，这是因为MERGE通常更有效，而且如果使用了临时表，视图是不可更新。</li>
</ul>

 <h2>
 
 视图与表的关系
 
 </h2>
 <ul>
<li>虽然视图是基于表的一个虚拟表，但是用户可以对某些视图进行更新操作，其本质就是通过视图的定义来更新基表。一般称进行更新操作的视图为可更新视图(updatable view)。视图定义中的WITH CHECK OPTION就是针对于可更新表的。</li>
</ul>

 <h2>
 
 WITH CHECK OPTION测试代码
 
 </h2>
 <pre><code class="hljs language-SQL"># 创建视图（WITHOUT CHECK OPTION）
CREATE OR REPLACE VIEW user_info_v AS SELECT * FROM user_info WHERE id &lt; 10
# 查看视图（基表 + 视图）
SHOW TABLES
# 只查看基表
SELECT * FROM information_schema.TABLES WHERE table_type = &#x27;BASE TABLE&#x27; AND table_schema = database()\G
INSERT INTO user_info_v SELECT 12, &#x27;lisi&#x27;, &#x27;5678&#x27;
INSERT INTO user_info_v SELECT 2, &#x27;wangwu&#x27;, &#x27;9012&#x27;
SELECT * FROM user_info
SELECT * FROM user_info_v

# 删除视图
DROP VIEW IF EXISTS user_info_v;

# 创建视图（WITH CHECK OPTION）
CREATE OR REPLACE VIEW user_info_v AS SELECT * FROM user_info WHERE id &lt; 10 WITH CHECK OPTION
INSERT INTO user_info_v SELECT 13, &#x27;zhaoliu&#x27;, &#x27;3456&#x27;
</code></pre>
<img src="https://t1.picb.cc/uploads/2018/11/13/JSO1Dr.png" alt="enter image description here">
<img src="http://hellomrrs-imgs.oss-cn-shanghai.aliyuncs.com/18-11-13/37805165.jpg" alt="enter image description here">
<img src="http://hellomrrs-imgs.oss-cn-shanghai.aliyuncs.com/18-11-13/67280010.jpg" alt="enter image description here">
<img src="http://hellomrrs-imgs.oss-cn-shanghai.aliyuncs.com/18-11-13/47500056.jpg" alt="enter image description here">

 <h2>
 
 视图的作用测试代码
 
 </h2>
 <pre><code class="hljs language-SQL">DELIMITER //
CREATE PROCEDURE view_test(_cnt INT UNSIGNED)
BEGIN
 SET @cnt = 0;
 WHILE @cnt &lt; _cnt DO
 INSERT INTO user_info(user_name, user_pwd) values(REPEAT(CHAR(97+RAND()*26), 20), REPEAT(CHAR(97+RAND()*26), 20));
 SET @cnt = @cnt + 1;
 END WHILE;
END;
//
DELIMITER ;

call view_test(10000);
call view_test(50000);
call view_test(50000);

CREATE OR REPLACE VIEW view_func_test0 AS SELECT * FROM user_info WHERE id % 4 = 0 WITH CHECK OPTION;
CREATE OR REPLACE VIEW view_func_test1 AS SELECT * FROM user_info WHERE id % 4 = 1 WITH CHECK OPTION;
CREATE OR REPLACE VIEW view_func_test2 AS SELECT * FROM user_info WHERE id % 4 = 2 WITH CHECK OPTION;
CREATE OR REPLACE VIEW view_func_test3 AS SELECT * FROM user_info WHERE id % 4 = 3 WITH CHECK OPTION;
</code></pre>
<img src="https://t1.picb.cc/uploads/2018/11/13/JSWxYv.png" alt="enter image description here">

# MySQL-视图
## 什么是视图
- 视图是由查询结果形成的一张**虚拟表**，可以当作一张表使用，但与持久表(permanent table)不同的是，视图中的数据**没有实际的物理存储**。

## 视图的作用
- 视图在一定程度上起到一个**安全层**的作用，可以进行**权限控制**
- **简化查询**语句
- 对于某张很大的表，可以将其分为多个视图，从而**加快查询**

##

MySQL-视图

<h1>
 
 MySQL-触发器
 
 </h1>
 
 <h2>
 
 什么是触发器
 
 </h2>
 <ul>
<li>触发器是一种特殊的存储过程，它在插入/删除或修改表中的数据时触发执行，它比数据库本身有着更精细和更复杂的数据约束力。</li>
</ul>

 <h2>
 
 触发器的作用
 
 </h2>
 <ul>
<li>用于实现完整性约束</li>
<li>通过触发器，用户可以实现MySQL数据库本身并不支持的一些特性，如对于传统CHECK约束的支持，物化视图，高级复制，审计等特性</li>
</ul>

 <h2>
 
 触发器的特性
 
 </h2>
 <ul>
<li>监视地点：一般就是某一张表</li>
<li>监视/触发事件：UPDATE/INSERT/DELETE</li>
<li>触发时间：AFTER/BEFORE</li>
</ul>

 <h2>
 
 触发器的创建语法
 
 </h2>
 <pre><code class="hljs language-SQL">CREATE
[DEFINER = { user | CURRENT_USER }]
TRIGGER trigger_name
trigger_time trigger_event
ON tbl_name FOR EACH ROW
trigger_body

trigger_time: { BEFORE | AFTER }
trigger_event: { INSERT | UPDATE | DELETE }
</code></pre>
<ul>
<li>触发程序是与表有关的数据库对象，当表上出现特定事件时将激活该对象。触发程序与tbl_name相关，tbl_name必须引用永久性表，不能将触发程序与TEMPORARY表或视图关联起来。</li>
<li>对于具有相同触发程序动作事件和时间的给定表，不能有两个触发程序。</li>
<li>trigger_body是当触发程序激活时执行的语句。可以使用BEGIN...END复合语句结构。</li>
<li>对于INSERT而言，新插入的行用NEW表示，行中的每一列值用NEW.col_name表示。</li>
<li>对于DELETE而言，欲删除的那一行用OLD表示，行中的每一列值用OLD.col_name表示。</li>
<li>对于UPDATE而言，修改前的行用OLD表示，修改后的行用NEW表示。</li>
</ul>

 <h2>
 
 触发器的管理
 
 </h2>
 <ul>
<li>查看所有触发器<pre><code class="hljs language-SQL">SHOW TRIGGERS [FROM db_name] [like_or_where]
</code></pre>
</li>
<li>MySQL中有一个information_schema.TRIGGERS表，存储所有库中的触发器，查看：<pre><code class="hljs language-SQL">DESC information_schema.TRIGGERS
</code></pre>
</li>
<li>删除触发器<pre><code class="hljs language-SQL">DROP VIEW [IF EXISTS]
view_name [, view_name] ...
[RESTRICT | CASCADE]
</code></pre>
</li>
</ul>

 <h2>
 
 触发器的使用示例
 
 </h2>
 
 <h3>
 
 基本使用
 
 </h3>
 <pre><code class="hljs language-SQL">DELIMITER //
CREATE TRIGGER user_trg
AFTER INSERT
ON user_info FOR EACH ROW
BEGIN
 INSERT INTO user_salaries SELECT new.id, new.user_name, 0;
END;
//
DELIMITER;

INSERT INTO user_info SELECT 1, &#x27;张三&#x27;， &#x27;123456&#x27;;
</code></pre>
<img src="https://t1.picb.cc/uploads/2018/11/13/JS7x7L.png" alt="enter image description here">

 <h3>
 
 对于约束的支持
 
 </h3>
 <pre><code class="hljs language-SQL">CREATE TABLE userCash(id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, 
 cash INT UNSIGNED NOT NULL DEFAULT 0
)ENGINE = INNODB CHARSET = &#x27;UTF8&#x27;;
CREATE TABLE userCashErr_log (
 id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
 old_cash INT UNSIGNED NOT NULL,
 new_cash INT UNSIGNED NOT NULL,
 user_name VARCHAR(20),
 time DATETIME
)ENGINE = INNODB CHARSET = &#x27;UTF8&#x27;;

DELIMITER //
CREATE TRIGGER userCashUpdate_tgr 
BEFORE UPDATE
ON userCash FOR EACH ROW
BEGIN
 IF new.cash - old.cash &gt; 0 THEN
 INSERT INTO userCashErr_log SELECT old.id, old.cash, new.cash, USER(), NOW();
 SET new.cash = old.cash;
 END IF;
END;
//
DELIMITER ;

INSERT INTO userCash SELECT 1, 10000;
SELECT * FROM userCashErr_log;
UPDATE userCash SET cash = cash - (-20) WHERE id = 1;
SELECT * FROM userCashErr_log;
</code></pre>
<img src="https://t1.picb.cc/uploads/2018/11/13/JS7T9W.png" alt="enter image description here">

# MySQL-触发器
## 什么是触发器
- 触发器是一种**特殊的存储过程**，它在插入/删除或修改表中的数据时**触发执行**，它比数据库本身有着更精细和更复杂的数据约束力。

## 触发器的作用
- 用于实现完整性约束
- 通过触发器，用户可以实现MySQL数据库本身并不支持的一些特性，如对于传统CHECK约束的支持，物化视图，高级复制，审计等特性

## 触发器的特性
- 监视地点：一