Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@6f5d00693e 🚀

note/CSS.html

@@ -8,7 +8,7 @@
     <link rel="preload stylesheet" href="/assets/style.60c127af.css" as="style">
     <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.32e7511c.js">
     <link rel="modulepreload" href="/assets/app.cd69620c.js">
-    <link rel="modulepreload" href="/assets/note_CSS.md.80b2cf1e.lean.js">
+    <link rel="modulepreload" href="/assets/note_CSS.md.e00f253d.lean.js">
     
     <link rel="icon" href="/logo.png">
   <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -492,8 +492,8 @@
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> el </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.item</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age) </span><span style="color:#676E95;font-style:italic;">// 18</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#676E95;font-style:italic;">// &#39;ziu&#39;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-02-14T14:24:17.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_从0实现一个年度报告.md\":\"f9e4f94a\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"91b8909d\",\"article_一文读懂函数中this指向问题.md\":\"9459a2ec\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"4dbc30b2\",\"article_一文读懂伪类与伪元素.md\":\"3fc49ba0\",\"article_深入理解proxy与reflect.md\":\"160eec3e\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"2af64f76\",\"index.md\":\"849c94aa\",\"article_深入理解浏览器运行原理.md\":\"f107bd18\",\"article_一文读懂事件冒泡与事件捕获.md\":\"244efa4f\",\"article_深入理解浏览器缓存机制.md\":\"6ab30d66\",\"note_ssr.md\":\"7636a3b6\",\"note_front-end engineering.md\":\"cb821feb\",\"note_javascript.md\":\"a023ce33\",\"project_clipboardmanager_index.md\":\"ddc0ba11\",\"project_clipboardmanager_statement_index.md\":\"7a3c54ab\",\"project_clipboardmanager_vip_index.md\":\"bca4d509\",\"project_smartwordbreak_index.md\":\"f876dd54\",\"project_smartwordbreak_log_index.md\":\"77f10905\",\"project_smartwordbreak_statement_index.md\":\"d0d48ce9\",\"self_index.md\":\"34f1ce37\",\"works_contribution.md\":\"755a6a1a\",\"works_opensource.md\":\"05d676ac\",\"project_clipboardmanager_log_index.md\":\"8b1b6129\",\"project_clipboardmanager_guide_index.md\":\"078b8af5\",\"note_css.md\":\"80b2cf1e\",\"note_javascriptenhanced.md\":\"48d25e9e\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-02-14T16:39:34.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"615eccd1\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"b8c1d9f8\",\"article_一文读懂事件冒泡与事件捕获.md\":\"e9a24a88\",\"article_一文读懂函数中this指向问题.md\":\"3eb0bfe1\",\"article_从0实现一个年度报告.md\":\"87e45ff1\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"041d2994\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"8b1f35df\",\"article_深入理解浏览器缓存机制.md\":\"e27bdddb\",\"article_深入理解浏览器运行原理.md\":\"3fc6bc33\",\"index.md\":\"93e1b928\",\"article_深入理解proxy与reflect.md\":\"80e63da6\",\"note_javascript.md\":\"5f0e5761\",\"note_front-end engineering.md\":\"31b57b54\",\"note_css.md\":\"e00f253d\",\"project_clipboardmanager_statement_index.md\":\"18b9a508\",\"project_clipboardmanager_vip_index.md\":\"bacf7cae\",\"project_smartwordbreak_index.md\":\"0a354613\",\"project_clipboardmanager_log_index.md\":\"fba3500e\",\"project_smartwordbreak_log_index.md\":\"42b38b4d\",\"self_index.md\":\"a22e44fa\",\"project_smartwordbreak_statement_index.md\":\"87e34b2d\",\"works_contribution.md\":\"f294fe21\",\"works_opensource.md\":\"1395752f\",\"note_ssr.md\":\"97e14f87\",\"project_clipboardmanager_index.md\":\"af86f6c6\",\"project_clipboardmanager_guide_index.md\":\"1e25b3f6\",\"note_javascriptenhanced.md\":\"8941a1f7\"}")</script>
     <script type="module" async src="/assets/app.cd69620c.js"></script>
     
   </body>

note/JavaScriptEnhanced.html

@@ -8,7 +8,7 @@
     <link rel="preload stylesheet" href="/assets/style.60c127af.css" as="style">
     <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.32e7511c.js">
     <link rel="modulepreload" href="/assets/app.cd69620c.js">
-    <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.48d25e9e.lean.js">
+    <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.8941a1f7.lean.js">
     
     <link rel="icon" href="/logo.png">
   <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -1231,7 +1231,7 @@
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">err</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">err</span><span style="color:#F07178;">)</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="promise-any-es12" tabindex="-1"><code>Promise.any()</code> (ES12) <a class="header-anchor" href="#promise-any-es12" aria-hidden="true">#</a></h4><ul><li>any方法是ES12新增的方法，与race类似 <ul><li>any方法会等到一个fulfilled状态，才会决定新的Promise状态</li><li>如果所有Promise都是reject的，那么也会等到所有Promise都变成rejected状态</li><li>（race方法一旦fulfilled或rejected会直接修改新的Promise状态）</li></ul></li></ul><h2 id="迭代器与生成器" tabindex="-1">迭代器与生成器 <a class="header-anchor" href="#迭代器与生成器" aria-hidden="true">#</a></h2><h3 id="异步处理" tabindex="-1">异步处理 <a class="header-anchor" href="#异步处理" aria-hidden="true">#</a></h3><h4 id="请求代码结构" tabindex="-1">请求代码结构 <a class="header-anchor" href="#请求代码结构" aria-hidden="true">#</a></h4><p>假设有如下场景：请求3的数据依赖请求2，请求2的数据依赖请求1，这样会存在嵌套的问题</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 第一次请求</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="promise-any-es12" tabindex="-1"><code>Promise.any()</code> (ES12) <a class="header-anchor" href="#promise-any-es12" aria-hidden="true">#</a></h4><ul><li>any方法是ES12新增的方法，与race类似 <ul><li>any方法会等到一个fulfilled状态，才会决定新的Promise状态</li><li>如果所有Promise都是reject的，那么也会等到所有Promise都变成rejected状态</li><li>（race方法一旦fulfilled或rejected会直接修改新的Promise状态）</li></ul></li></ul><h2 id="迭代器与生成器" tabindex="-1">迭代器与生成器 <a class="header-anchor" href="#迭代器与生成器" aria-hidden="true">#</a></h2><ul><li>迭代器 可迭代对象</li><li>原生的迭代器对象</li><li>自定义类的迭代器</li><li>生成器的理解和作用</li><li>自定义生成器方案</li><li>异步处理方案解析</li></ul><h3 id="什么是迭代器" tabindex="-1">什么是迭代器 <a class="header-anchor" href="#什么是迭代器" aria-hidden="true">#</a></h3><p>迭代器是帮助我们对某个数据结构进行遍历的对象，不同语言对迭代器都有不同的实现</p><p>在JavaScript中，迭代器是一个具体的对象，这个对象需要符合迭代器协议（literator protocol）</p><ul><li>迭代器协议产生了一系列值（无论是有限个还是无限个）的标准方式</li><li>在JavaScript中这个标准就是一个特定的<code>next</code>方法</li></ul><p>这个<code>next()</code>方法有如下要求：</p><ul><li>一个没有参数或者一个参数的函数，返回一个对象，此对象拥有两个属性： <ul><li><code>done</code> 布尔值 代表当前迭代是否完成 <ul><li>如果迭代器可以产生序列中下一个值，则<code>done = false</code>（等价于没有指定<code>done</code>这个属性）</li><li>如果迭代器已将序列迭代完毕，则<code>done = true</code>，这种情况下<code>value</code>是可选的，如果它依然存在，即为迭代结束之后的默认返回值</li></ul></li><li><code>value</code><ul><li>迭代器返回的任何JavaScript值，其<code>done</code>值为<code>true</code>时可以省略</li></ul></li></ul></li></ul><p>案例：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"></div></div><h3 id="异步处理" tabindex="-1">异步处理 <a class="header-anchor" href="#异步处理" aria-hidden="true">#</a></h3><p>假设有如下场景：请求3的数据依赖请求2，请求2的数据依赖请求1，这样会存在嵌套的问题</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 第一次请求</span></span>
 <span class="line"><span style="color:#82AAFF;">reqData</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 第二次请求</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#82AAFF;">reqData</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -2021,8 +2021,8 @@
 <span class="line"><span style="color:#82AAFF;">setTimeout</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">eventBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">navClick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">callBack</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 移除某个事件的某次回调</span></span>
 <span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#A6ACCD;">)</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-02-14T14:24:17.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/CSS.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>CSS基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_从0实现一个年度报告.md\":\"f9e4f94a\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"91b8909d\",\"article_一文读懂函数中this指向问题.md\":\"9459a2ec\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"4dbc30b2\",\"article_一文读懂伪类与伪元素.md\":\"3fc49ba0\",\"article_深入理解proxy与reflect.md\":\"160eec3e\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"2af64f76\",\"index.md\":\"849c94aa\",\"article_深入理解浏览器运行原理.md\":\"f107bd18\",\"article_一文读懂事件冒泡与事件捕获.md\":\"244efa4f\",\"article_深入理解浏览器缓存机制.md\":\"6ab30d66\",\"note_ssr.md\":\"7636a3b6\",\"note_front-end engineering.md\":\"cb821feb\",\"note_javascript.md\":\"a023ce33\",\"project_clipboardmanager_index.md\":\"ddc0ba11\",\"project_clipboardmanager_statement_index.md\":\"7a3c54ab\",\"project_clipboardmanager_vip_index.md\":\"bca4d509\",\"project_smartwordbreak_index.md\":\"f876dd54\",\"project_smartwordbreak_log_index.md\":\"77f10905\",\"project_smartwordbreak_statement_index.md\":\"d0d48ce9\",\"self_index.md\":\"34f1ce37\",\"works_contribution.md\":\"755a6a1a\",\"works_opensource.md\":\"05d676ac\",\"project_clipboardmanager_log_index.md\":\"8b1b6129\",\"project_clipboardmanager_guide_index.md\":\"078b8af5\",\"note_css.md\":\"80b2cf1e\",\"note_javascriptenhanced.md\":\"48d25e9e\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-02-14T16:39:34.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/CSS.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>CSS基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"615eccd1\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"b8c1d9f8\",\"article_一文读懂事件冒泡与事件捕获.md\":\"e9a24a88\",\"article_一文读懂函数中this指向问题.md\":\"3eb0bfe1\",\"article_从0实现一个年度报告.md\":\"87e45ff1\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"041d2994\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"8b1f35df\",\"article_深入理解浏览器缓存机制.md\":\"e27bdddb\",\"article_深入理解浏览器运行原理.md\":\"3fc6bc33\",\"index.md\":\"93e1b928\",\"article_深入理解proxy与reflect.md\":\"80e63da6\",\"note_javascript.md\":\"5f0e5761\",\"note_front-end engineering.md\":\"31b57b54\",\"note_css.md\":\"e00f253d\",\"project_clipboardmanager_statement_index.md\":\"18b9a508\",\"project_clipboardmanager_vip_index.md\":\"bacf7cae\",\"project_smartwordbreak_index.md\":\"0a354613\",\"project_clipboardmanager_log_index.md\":\"fba3500e\",\"project_smartwordbreak_log_index.md\":\"42b38b4d\",\"self_index.md\":\"a22e44fa\",\"project_smartwordbreak_statement_index.md\":\"87e34b2d\",\"works_contribution.md\":\"f294fe21\",\"works_opensource.md\":\"1395752f\",\"note_ssr.md\":\"97e14f87\",\"project_clipboardmanager_index.md\":\"af86f6c6\",\"project_clipboardmanager_guide_index.md\":\"1e25b3f6\",\"note_javascriptenhanced.md\":\"8941a1f7\"}")</script>
     <script type="module" async src="/assets/app.cd69620c.js"></script>
     
   </body>