Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@5e9317ee58 🚀

assets/article_【2023】青训营 - 前端练习题汇总解析.md.d5c59951.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1681914514000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to &quot;【2023】青训营 - 前端练习题汇总解析&quot;">​</a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to &quot;选择题&quot;">​</a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to &quot;DAY 1&quot;">​</a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to &quot;题目描述&quot;">​</a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1：  </span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1681915251000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to &quot;【2023】青训营 - 前端练习题汇总解析&quot;">​</a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to &quot;选择题&quot;">​</a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to &quot;DAY 1&quot;">​</a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to &quot;题目描述&quot;">​</a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1：  </span></span>
 <span class="line"><span style="color:#A6ACCD;">下列哪些是 HTML5 的新特性？  </span></span>
 <span class="line"><span style="color:#A6ACCD;">A. 语义标签  </span></span>
 <span class="line"><span style="color:#A6ACCD;">B. Canvas 绘图  </span></span>

assets/article_【2023】青训营 - 前端练习题汇总解析.md.d5c59951.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1681914514000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1681915251000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};

assets/article_【字节跳动】前端面试题总结.md.59c6844f.js

@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1681914514000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to &quot;【字节跳动】前端面试题总结&quot;">​</a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to &quot;看代码说结果&quot;">​</a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to &quot;代码输出结果1&quot;">​</a></h3><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:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to &quot;代码输出结果2&quot;">​</a></h3><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;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1681915251000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to &quot;【字节跳动】前端面试题总结&quot;">​</a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to &quot;看代码说结果&quot;">​</a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to &quot;代码输出结果1&quot;">​</a></h3><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:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to &quot;代码输出结果2&quot;">​</a></h3><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;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</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;">(a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b)</span></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></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1 undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果3" tabindex="-1">代码输出结果3 <a class="header-anchor" href="#代码输出结果3" aria-label="Permalink to &quot;代码输出结果3&quot;">​</a></h3><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:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">()</span></span>
 <span class="line"><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;"> </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:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">()</span></span>

assets/article_【字节跳动】前端面试题总结.md.59c6844f.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1681914514000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1681915251000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};

assets/article_【快手】深入理解前端面试题.md.3eda05de.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1681914514000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l(`<h1 id="【快手】深入理解前端面试题" tabindex="-1">【快手】深入理解前端面试题 <a class="header-anchor" href="#【快手】深入理解前端面试题" aria-label="Permalink to &quot;【快手】深入理解前端面试题&quot;">​</a></h1><h2 id="快手一面" tabindex="-1">快手一面 <a class="header-anchor" href="#快手一面" aria-label="Permalink to &quot;快手一面&quot;">​</a></h2><h3 id="vue生命周期" tabindex="-1">Vue生命周期 <a class="header-anchor" href="#vue生命周期" aria-label="Permalink to &quot;Vue生命周期&quot;">​</a></h3><p><code>beforeCreate created beforeMount mounted</code></p><p><code>beforeUpdate updated</code></p><p><code>beforeDestory destoryed</code></p><p>Vue3移除了<code>beforeCreate</code> <code>created</code>两个声明周期钩子，这是因为setup发生在开始创建组件之前，在<code>beforeCreate</code>和<code>created</code>之前执行</p><p>可以在setup中使用的生命周期函数：<code>onMounted</code> <code>onUpdated</code> <code>onUnmounted</code> <code>onBeforeUpdate</code>这几个，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a299bd2229fb45d68a1cdd8731c94449~tplv-k3u1fbpfcp-zoom-1.image" alt="Vue 生命周期"></p><h3 id="网络请求一般在什么时候发起-为什么" tabindex="-1">网络请求一般在什么时候发起，为什么 <a class="header-anchor" href="#网络请求一般在什么时候发起-为什么" aria-label="Permalink to &quot;网络请求一般在什么时候发起，为什么&quot;">​</a></h3><p>越早越好，一般是放在<code>created</code>或<code>onMounted</code>或者<code>setup</code>中</p><ul><li><code>created</code>(vue2) 此时组件内的基本数据已经创建好，组件的模板结构尚未生成</li><li><code>mounted</code>(vue2) <code>onMounted</code>(vue3) 组件挂载到DOM树上，可以获取到DOM</li><li><code>setup</code>(vue3) 时机要早于<code>beforeCreated</code>和<code>created</code> 所以在setup中发起网络请求也可以</li></ul><h3 id="setup的执行时机相当于哪个生命周期" tabindex="-1">setup的执行时机相当于哪个生命周期 <a class="header-anchor" href="#setup的执行时机相当于哪个生命周期" aria-label="Permalink to &quot;setup的执行时机相当于哪个生命周期&quot;">​</a></h3><p><code>setup</code>的执行要早于<code>beforeCreated</code>和<code>created</code>，可以认为相当于这两个生命周期</p><h3 id="vue2和vue3的响应式原理" tabindex="-1">Vue2和Vue3的响应式原理 <a class="header-anchor" href="#vue2和vue3的响应式原理" aria-label="Permalink to &quot;Vue2和Vue3的响应式原理&quot;">​</a></h3><h4 id="vue2响应式原理" tabindex="-1">Vue2响应式原理 <a class="header-anchor" href="#vue2响应式原理" aria-label="Permalink to &quot;Vue2响应式原理&quot;">​</a></h4><p>全部使用<code>Object.defineProperty()</code>中的set与get函数</p><h4 id="vue3响应式原理" tabindex="-1">Vue3响应式原理 <a class="header-anchor" href="#vue3响应式原理" aria-label="Permalink to &quot;Vue3响应式原理&quot;">​</a></h4><p><code>ref</code>使用的是<code>Object.defineProperty()</code>，而<code>reactive</code>使用的是<code>Proxy</code></p><p><code>Proxy</code>可以直接深度代理一个对象，通过设置handler中的捕获器可以对对象创建一个代理，将各种行为监听并且同步到对象本身上</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:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1681915251000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l(`<h1 id="【快手】深入理解前端面试题" tabindex="-1">【快手】深入理解前端面试题 <a class="header-anchor" href="#【快手】深入理解前端面试题" aria-label="Permalink to &quot;【快手】深入理解前端面试题&quot;">​</a></h1><h2 id="快手一面" tabindex="-1">快手一面 <a class="header-anchor" href="#快手一面" aria-label="Permalink to &quot;快手一面&quot;">​</a></h2><h3 id="vue生命周期" tabindex="-1">Vue生命周期 <a class="header-anchor" href="#vue生命周期" aria-label="Permalink to &quot;Vue生命周期&quot;">​</a></h3><p><code>beforeCreate created beforeMount mounted</code></p><p><code>beforeUpdate updated</code></p><p><code>beforeDestory destoryed</code></p><p>Vue3移除了<code>beforeCreate</code> <code>created</code>两个声明周期钩子，这是因为setup发生在开始创建组件之前，在<code>beforeCreate</code>和<code>created</code>之前执行</p><p>可以在setup中使用的生命周期函数：<code>onMounted</code> <code>onUpdated</code> <code>onUnmounted</code> <code>onBeforeUpdate</code>这几个，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a299bd2229fb45d68a1cdd8731c94449~tplv-k3u1fbpfcp-zoom-1.image" alt="Vue 生命周期"></p><h3 id="网络请求一般在什么时候发起-为什么" tabindex="-1">网络请求一般在什么时候发起，为什么 <a class="header-anchor" href="#网络请求一般在什么时候发起-为什么" aria-label="Permalink to &quot;网络请求一般在什么时候发起，为什么&quot;">​</a></h3><p>越早越好，一般是放在<code>created</code>或<code>onMounted</code>或者<code>setup</code>中</p><ul><li><code>created</code>(vue2) 此时组件内的基本数据已经创建好，组件的模板结构尚未生成</li><li><code>mounted</code>(vue2) <code>onMounted</code>(vue3) 组件挂载到DOM树上，可以获取到DOM</li><li><code>setup</code>(vue3) 时机要早于<code>beforeCreated</code>和<code>created</code> 所以在setup中发起网络请求也可以</li></ul><h3 id="setup的执行时机相当于哪个生命周期" tabindex="-1">setup的执行时机相当于哪个生命周期 <a class="header-anchor" href="#setup的执行时机相当于哪个生命周期" aria-label="Permalink to &quot;setup的执行时机相当于哪个生命周期&quot;">​</a></h3><p><code>setup</code>的执行要早于<code>beforeCreated</code>和<code>created</code>，可以认为相当于这两个生命周期</p><h3 id="vue2和vue3的响应式原理" tabindex="-1">Vue2和Vue3的响应式原理 <a class="header-anchor" href="#vue2和vue3的响应式原理" aria-label="Permalink to &quot;Vue2和Vue3的响应式原理&quot;">​</a></h3><h4 id="vue2响应式原理" tabindex="-1">Vue2响应式原理 <a class="header-anchor" href="#vue2响应式原理" aria-label="Permalink to &quot;Vue2响应式原理&quot;">​</a></h4><p>全部使用<code>Object.defineProperty()</code>中的set与get函数</p><h4 id="vue3响应式原理" tabindex="-1">Vue3响应式原理 <a class="header-anchor" href="#vue3响应式原理" aria-label="Permalink to &quot;Vue3响应式原理&quot;">​</a></h4><p><code>ref</code>使用的是<code>Object.defineProperty()</code>，而<code>reactive</code>使用的是<code>Proxy</code></p><p><code>Proxy</code>可以直接深度代理一个对象，通过设置handler中的捕获器可以对对象创建一个代理，将各种行为监听并且同步到对象本身上</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:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</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:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>

assets/article_【快手】深入理解前端面试题.md.3eda05de.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1681914514000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function r(t,c,y,F,i,D){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1681915251000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function r(t,c,y,F,i,D){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};

assets/article_【用友金融】前端面试题总结.md.5f1b4d7f.js

@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1681914514000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to &quot;【用友金融】前端面试题总结&quot;">​</a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to &quot;回流与重绘&quot;">​</a></h2><p>下列关于回流和重绘的说法错误的是</p><ul><li><p>回流的性能开销大于重绘的性能开销</p></li><li><p>当页面结构、尺寸等改变时会发生回流</p></li><li><p>回流一定会引起重绘，重绘也一定会引起回流(x)</p></li><li><p>当页面结构不改变只是样式发生改变时会发生重绘，例如背景颜色改变时会发生重绘</p></li><li><p><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</p></li><li><p><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</p></li><li><p><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</p></li></ul><h2 id="css属性" tabindex="-1">CSS属性 <a class="header-anchor" href="#css属性" aria-label="Permalink to &quot;CSS属性&quot;">​</a></h2><p>下列选项中哪个描述对于visibility: hidden;与display: none;是正确的</p><ul><li>visibility属性不可继承</li><li>visibility: hidden; 不占据页面空间</li><li>display: none; 不占据页面空间(√)</li><li>都无法通过DOM交互</li></ul><h2 id="函数执行结果" tabindex="-1">函数执行结果 <a class="header-anchor" href="#函数执行结果" aria-label="Permalink to &quot;函数执行结果&quot;">​</a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to &quot;题目1&quot;">​</a></h3><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:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1681915251000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to &quot;【用友金融】前端面试题总结&quot;">​</a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to &quot;回流与重绘&quot;">​</a></h2><p>下列关于回流和重绘的说法错误的是</p><ul><li><p>回流的性能开销大于重绘的性能开销</p></li><li><p>当页面结构、尺寸等改变时会发生回流</p></li><li><p>回流一定会引起重绘，重绘也一定会引起回流(x)</p></li><li><p>当页面结构不改变只是样式发生改变时会发生重绘，例如背景颜色改变时会发生重绘</p></li><li><p><code>display: none</code> 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint</p></li><li><p><code>visibility: hidden</code> 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件</p></li><li><p><code>opacity: 0</code> 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</p></li></ul><h2 id="css属性" tabindex="-1">CSS属性 <a class="header-anchor" href="#css属性" aria-label="Permalink to &quot;CSS属性&quot;">​</a></h2><p>下列选项中哪个描述对于visibility: hidden;与display: none;是正确的</p><ul><li>visibility属性不可继承</li><li>visibility: hidden; 不占据页面空间</li><li>display: none; 不占据页面空间(√)</li><li>都无法通过DOM交互</li></ul><h2 id="函数执行结果" tabindex="-1">函数执行结果 <a class="header-anchor" href="#函数执行结果" aria-label="Permalink to &quot;函数执行结果&quot;">​</a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to &quot;题目1&quot;">​</a></h3><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:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"></span>

assets/article_【用友金融】前端面试题总结.md.5f1b4d7f.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1681914514000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l("",71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1681915251000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l("",71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};

assets/article_一文读懂事件冒泡与事件捕获.md.705d7bd0.js

@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1681914514000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to &quot;一文读懂事件冒泡与事件捕获&quot;">​</a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to &quot;💡 从例子入手&quot;">​</a></h2><p>这是一个<a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html" target="_blank" rel="noreferrer">简单的 Demo</a>，点击的 <code>Display video</code> 按钮后，将视频展示出来。</p><p>其中的视频 <code>&lt;video&gt;</code> 标签被 <code>&lt;div&gt;</code> 包裹，<code>&lt;div&gt;</code> 与 <code>&lt;video&gt;</code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code>&lt;video&gt;</code> 时播放视频，点击 <code>&lt;div&gt;</code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to &quot;🤔 什么是事件冒泡机制？事件捕获又是什么？&quot;">​</a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code>&lt;html&gt;</code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code>&lt;html&gt;</code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code>&lt;html&gt;</code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code>&lt;video&gt;</code> 点击事件触发后，虽然我们没有主动触发 <code>&lt;div&gt;</code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code>&lt;div&gt;</code> 上，并触发了绑定在其上的监听回调函数，将 <code>&lt;video&gt;</code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to &quot;📌 用例子验证结论&quot;">​</a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&gt; 捕获 click div1</span></span>
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1681915251000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to &quot;一文读懂事件冒泡与事件捕获&quot;">​</a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to &quot;💡 从例子入手&quot;">​</a></h2><p>这是一个<a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html" target="_blank" rel="noreferrer">简单的 Demo</a>，点击的 <code>Display video</code> 按钮后，将视频展示出来。</p><p>其中的视频 <code>&lt;video&gt;</code> 标签被 <code>&lt;div&gt;</code> 包裹，<code>&lt;div&gt;</code> 与 <code>&lt;video&gt;</code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code>&lt;video&gt;</code> 时播放视频，点击 <code>&lt;div&gt;</code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to &quot;🤔 什么是事件冒泡机制？事件捕获又是什么？&quot;">​</a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code>&lt;html&gt;</code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code>&lt;html&gt;</code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code>&lt;html&gt;</code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code>&lt;video&gt;</code> 点击事件触发后，虽然我们没有主动触发 <code>&lt;div&gt;</code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code>&lt;div&gt;</code> 上，并触发了绑定在其上的监听回调函数，将 <code>&lt;video&gt;</code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to &quot;📌 用例子验证结论&quot;">​</a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&gt; 捕获 click div1</span></span>
 <span class="line"><span style="color:#A6ACCD;">&gt; 捕获 click div2</span></span>
 <span class="line"><span style="color:#A6ACCD;">&gt; 捕获 click div3</span></span>
 <span class="line"><span style="color:#A6ACCD;">&gt; 冒泡 click div3</span></span>

assets/article_一文读懂事件冒泡与事件捕获.md.705d7bd0.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1681914514000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l("",63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1681915251000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l("",63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};

assets/article_一文读懂伪类与伪元素.md.85311a3f.js

@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1681914514000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to &quot;一文读懂伪类与伪元素&quot;">​</a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to &quot;🔰 什么是伪类？&quot;">​</a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to &quot;典型的伪类关键字&quot;">​</a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to &quot;\`:hover\`&quot;">​</a></h4><p>指针在 <code>&lt;button&gt;</code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">button</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1681915251000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to &quot;一文读懂伪类与伪元素&quot;">​</a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to &quot;🔰 什么是伪类？&quot;">​</a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to &quot;典型的伪类关键字&quot;">​</a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to &quot;\`:hover\`&quot;">​</a></h4><p>指针在 <code>&lt;button&gt;</code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">button</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></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><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="not" tabindex="-1"><code>:not</code> <a class="header-anchor" href="#not" aria-label="Permalink to &quot;\`:not\`&quot;">​</a></h4><p><strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p><p>将所有不是<code>&lt;p&gt;</code>的元素颜色改为蓝色：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>

assets/article_一文读懂伪类与伪元素.md.85311a3f.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1681914514000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l("",56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const d=s(p,[["render",c]]);export{b as __pageData,d as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1681915251000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l("",56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const d=s(p,[["render",c]]);export{b as __pageData,d as default};

assets/article_一文读懂函数中this指向问题.md.bbb94bbd.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1681914514000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to &quot;一文读懂函数中this指向问题&quot;">​</a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to &quot;函数中this指向&quot;">​</a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1681915251000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to &quot;一文读懂函数中this指向问题&quot;">​</a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to &quot;函数中this指向&quot;">​</a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
 <span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
 <span class="line"><span style="color:#A6ACCD;">  console.log(this)</span></span>
 <span class="line"><span style="color:#A6ACCD;">}</span></span>

assets/article_一文读懂函数中this指向问题.md.bbb94bbd.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1681914514000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l("",59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1681915251000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l("",59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};

assets/article_从0实现一个年度报告.md.7387cc92.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1681914514000}'),p={name:"article/从0实现一个年度报告.md"},o=l(`<h1 id="从0实现一个年度报告" tabindex="-1">从0实现一个年度报告 <a class="header-anchor" href="#从0实现一个年度报告" aria-label="Permalink to &quot;从0实现一个年度报告&quot;">​</a></h1><p>每到年底各大应用都会推出自己的年终总结报告，统计出用户一年来在应用内的行为展示给用户，供用户记录、分享。</p><p>今年掘金社区推出了自己的<a href="https://zjsms.com/hbdA5jR" target="_blank" rel="noreferrer">2022掘友年度报告</a>，这次我们仿照这个报告，从0开始自己实现一个年终总结报告页面</p><h2 id="实现难点" tabindex="-1">实现难点 <a class="header-anchor" href="#实现难点" aria-label="Permalink to &quot;实现难点&quot;">​</a></h2><h3 id="_1-数据模拟" tabindex="-1">1. 数据模拟 <a class="header-anchor" href="#_1-数据模拟" aria-label="Permalink to &quot;1. 数据模拟&quot;">​</a></h3><p>一般情况下是根据用户UID，到后端去请求相关接口获得统计数据。</p><p>例如掘金的接口为<code>https://api.juejin.cn/event_api/v1/annual/annual_summary?aid=xxxxxx</code></p><p>本次后端使用<code>NodeJS</code>实现了一个爬虫，可以将用户数据统计完成后导出JSON格式的数据，将此数据粘贴到前端页面的输入框即可生成自己的报告</p><h3 id="_2-屏幕适配" tabindex="-1">2. 屏幕适配 <a class="header-anchor" href="#_2-屏幕适配" aria-label="Permalink to &quot;2. 屏幕适配&quot;">​</a></h3><p>可以观察到，在PC端和在手机端访问年度报告展示的效果是不一样的。</p><p>本次考虑使用媒体查询来实现这个功能：</p><ul><li>宽屏则展示背景，页面切换也使用背景中的上下切换按钮</li><li>小屏则隐藏背景，让内容填满屏幕，页面切换通过滑动事件监听</li></ul><h3 id="_3-动画效果" tabindex="-1">3. 动画效果 <a class="header-anchor" href="#_3-动画效果" aria-label="Permalink to &quot;3. 动画效果&quot;">​</a></h3><p>动画分为文本与背景元素的动画</p><ul><li>背景元素的动画使用了SVG动画 <ul><li>动画中不动的部分直接使用<code>.png</code>图片</li><li>运动的部分使用SVG动画绘制，如克里克的眼睛、尾巴</li></ul></li><li>文本的动画使用了<code>CSS Animation</code>渐显的效果 <ul><li>不同段落之间通过<code>animation-delay</code>属性，彼此相差<code>1000ms</code></li></ul></li></ul><p>背景动画容器的四个位置：<code>左上角</code> <code>右下角</code> <code>中间部分</code> <code>中间（悬浮气泡）</code>。不同位置的动画容器都采用绝对定位<code>position: absolute;</code>，辅以<code>z-index</code>实现层叠</p><p>囿于工期，本次的背景动画直接采用静态图片+<code>CSS Animation</code>实现上下浮动的效果</p><h3 id="_4-音乐播放" tabindex="-1">4. 音乐播放 <a class="header-anchor" href="#_4-音乐播放" aria-label="Permalink to &quot;4. 音乐播放&quot;">​</a></h3><p>通过<code>Audio</code>接口访问网络音乐链接，控制音乐相关功能</p><ul><li>进入页面开始播放</li><li>离开页面暂停播放</li><li>支持点击按钮切换播放状态</li></ul><h2 id="用户数据" tabindex="-1">用户数据 <a class="header-anchor" href="#用户数据" aria-label="Permalink to &quot;用户数据&quot;">​</a></h2><h3 id="用户数据内容" tabindex="-1">用户数据内容 <a class="header-anchor" href="#用户数据内容" aria-label="Permalink to &quot;用户数据内容&quot;">​</a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 用户名</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1681915251000}'),p={name:"article/从0实现一个年度报告.md"},o=l(`<h1 id="从0实现一个年度报告" tabindex="-1">从0实现一个年度报告 <a class="header-anchor" href="#从0实现一个年度报告" aria-label="Permalink to &quot;从0实现一个年度报告&quot;">​</a></h1><p>每到年底各大应用都会推出自己的年终总结报告，统计出用户一年来在应用内的行为展示给用户，供用户记录、分享。</p><p>今年掘金社区推出了自己的<a href="https://zjsms.com/hbdA5jR" target="_blank" rel="noreferrer">2022掘友年度报告</a>，这次我们仿照这个报告，从0开始自己实现一个年终总结报告页面</p><h2 id="实现难点" tabindex="-1">实现难点 <a class="header-anchor" href="#实现难点" aria-label="Permalink to &quot;实现难点&quot;">​</a></h2><h3 id="_1-数据模拟" tabindex="-1">1. 数据模拟 <a class="header-anchor" href="#_1-数据模拟" aria-label="Permalink to &quot;1. 数据模拟&quot;">​</a></h3><p>一般情况下是根据用户UID，到后端去请求相关接口获得统计数据。</p><p>例如掘金的接口为<code>https://api.juejin.cn/event_api/v1/annual/annual_summary?aid=xxxxxx</code></p><p>本次后端使用<code>NodeJS</code>实现了一个爬虫，可以将用户数据统计完成后导出JSON格式的数据，将此数据粘贴到前端页面的输入框即可生成自己的报告</p><h3 id="_2-屏幕适配" tabindex="-1">2. 屏幕适配 <a class="header-anchor" href="#_2-屏幕适配" aria-label="Permalink to &quot;2. 屏幕适配&quot;">​</a></h3><p>可以观察到，在PC端和在手机端访问年度报告展示的效果是不一样的。</p><p>本次考虑使用媒体查询来实现这个功能：</p><ul><li>宽屏则展示背景，页面切换也使用背景中的上下切换按钮</li><li>小屏则隐藏背景，让内容填满屏幕，页面切换通过滑动事件监听</li></ul><h3 id="_3-动画效果" tabindex="-1">3. 动画效果 <a class="header-anchor" href="#_3-动画效果" aria-label="Permalink to &quot;3. 动画效果&quot;">​</a></h3><p>动画分为文本与背景元素的动画</p><ul><li>背景元素的动画使用了SVG动画 <ul><li>动画中不动的部分直接使用<code>.png</code>图片</li><li>运动的部分使用SVG动画绘制，如克里克的眼睛、尾巴</li></ul></li><li>文本的动画使用了<code>CSS Animation</code>渐显的效果 <ul><li>不同段落之间通过<code>animation-delay</code>属性，彼此相差<code>1000ms</code></li></ul></li></ul><p>背景动画容器的四个位置：<code>左上角</code> <code>右下角</code> <code>中间部分</code> <code>中间（悬浮气泡）</code>。不同位置的动画容器都采用绝对定位<code>position: absolute;</code>，辅以<code>z-index</code>实现层叠</p><p>囿于工期，本次的背景动画直接采用静态图片+<code>CSS Animation</code>实现上下浮动的效果</p><h3 id="_4-音乐播放" tabindex="-1">4. 音乐播放 <a class="header-anchor" href="#_4-音乐播放" aria-label="Permalink to &quot;4. 音乐播放&quot;">​</a></h3><p>通过<code>Audio</code>接口访问网络音乐链接，控制音乐相关功能</p><ul><li>进入页面开始播放</li><li>离开页面暂停播放</li><li>支持点击按钮切换播放状态</li></ul><h2 id="用户数据" tabindex="-1">用户数据 <a class="header-anchor" href="#用户数据" aria-label="Permalink to &quot;用户数据&quot;">​</a></h2><h3 id="用户数据内容" tabindex="-1">用户数据内容 <a class="header-anchor" href="#用户数据内容" aria-label="Permalink to &quot;用户数据内容&quot;">​</a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 用户名</span></span>
 <span class="line"><span style="color:#A6ACCD;">- 注册时间 距今天数</span></span>
 <span class="line"><span style="color:#A6ACCD;">- 创作相关</span></span>
 <span class="line"><span style="color:#A6ACCD;">    - 发布文章数</span></span>

assets/article_从0实现一个年度报告.md.7387cc92.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1681914514000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const A=s(p,[["render",t]]);export{u as __pageData,A as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1681915251000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const A=s(p,[["render",t]]);export{u as __pageData,A as default};

assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.c14c5f43.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1681914514000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to &quot;彻底搞懂对象的数据属性描述符、存储属性描述符&quot;">​</a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to &quot;属性描述符&quot;">​</a></h2><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;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1681915251000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to &quot;彻底搞懂对象的数据属性描述符、存储属性描述符&quot;">​</a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to &quot;属性描述符&quot;">​</a></h2><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;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>

assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.c14c5f43.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1681914514000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1681915251000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};

assets/article_浅析defineProperty与Proxy实现的双向绑定.md.d99d477f.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1681914514000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to &quot;浅析defineProperty与Proxy实现的双向绑定&quot;">​</a></h1><blockquote><p>文章内容总结自Vue官网 <a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96" target="_blank" rel="noreferrer">深入响应式原理</a></p></blockquote><h2 id="🔰-vue2的响应式原理" tabindex="-1">🔰 Vue2的响应式原理 <a class="header-anchor" href="#🔰-vue2的响应式原理" aria-label="Permalink to &quot;🔰 Vue2的响应式原理&quot;">​</a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1681915251000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to &quot;浅析defineProperty与Proxy实现的双向绑定&quot;">​</a></h1><blockquote><p>文章内容总结自Vue官网 <a href="https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96" target="_blank" rel="noreferrer">深入响应式原理</a></p></blockquote><h2 id="🔰-vue2的响应式原理" tabindex="-1">🔰 Vue2的响应式原理 <a class="header-anchor" href="#🔰-vue2的响应式原理" aria-label="Permalink to &quot;🔰 Vue2的响应式原理&quot;">​</a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">=&#39;</span><span style="color:#C3E88D;">Hello, World.</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Modify vm.text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vBox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>

assets/article_浅析defineProperty与Proxy实现的双向绑定.md.d99d477f.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1681914514000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l("",20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1681915251000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l("",20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};

assets/article_深入JavaScript数据类型.md.d757de56.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1681914514000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to &quot;深入JavaScript数据类型&quot;">​</a></h2><p>JavaScript包含以下几种数据类型：</p><ul><li>Number 数字</li><li>String 字符串</li><li>Boolean 布尔值</li><li>Symbol 符号 （ES6新增）</li><li>Object 对象 <ul><li>Function 函数</li><li>Array 数组</li><li>Date 日期</li><li>RegExp 正则表达式</li><li>...</li></ul></li><li>null 空</li><li>undefined 未定义</li></ul><p>从语言底层值的可变与不可变，可以将JS中的数据分为两种：不可变值（原始类型）和可变值（引用类型）</p><p>除了Object及继承自Object的特殊对象，其他的类型都为<strong>原始类型</strong>。</p><h2 id="typeof运算符" tabindex="-1">typeof运算符 <a class="header-anchor" href="#typeof运算符" aria-label="Permalink to &quot;typeof运算符&quot;">​</a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>&#39;object&#39;</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1681915251000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to &quot;深入JavaScript数据类型&quot;">​</a></h2><p>JavaScript包含以下几种数据类型：</p><ul><li>Number 数字</li><li>String 字符串</li><li>Boolean 布尔值</li><li>Symbol 符号 （ES6新增）</li><li>Object 对象 <ul><li>Function 函数</li><li>Array 数组</li><li>Date 日期</li><li>RegExp 正则表达式</li><li>...</li></ul></li><li>null 空</li><li>undefined 未定义</li></ul><p>从语言底层值的可变与不可变，可以将JS中的数据分为两种：不可变值（原始类型）和可变值（引用类型）</p><p>除了Object及继承自Object的特殊对象，其他的类型都为<strong>原始类型</strong>。</p><h2 id="typeof运算符" tabindex="-1">typeof运算符 <a class="header-anchor" href="#typeof运算符" aria-label="Permalink to &quot;typeof运算符&quot;">​</a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>&#39;object&#39;</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
 <span class="line"><span style="color:#676E95;font-style:italic;">// 而 null 与 object 通过 typeof 运算得到的都是 &#39;object&#39;</span></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> targets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</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:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">]</span></span>
 <span class="line"></span>

assets/article_深入JavaScript数据类型.md.d757de56.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1681914514000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1681915251000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};

assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.a1d651b9.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1681914514000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to &quot;深入Vue3源码，看看Vue.use后究竟发生了什么？&quot;">​</a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to &quot;从全局注册组件库入手&quot;">​</a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1681915251000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to &quot;深入Vue3源码，看看Vue.use后究竟发生了什么？&quot;">​</a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to &quot;从全局注册组件库入手&quot;">​</a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> CustomInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/component/CustomInput.vue</span><span style="color:#89DDFF;">&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>

assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.a1d651b9.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1681914514000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l("",26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1681915251000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l("",26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};

assets/article_深入理解Proxy与Reflect.md.e549d08c.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1681914514000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to &quot;深入理解Proxy与Reflect&quot;">​</a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to &quot;监听对象的操作&quot;">​</a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</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:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1681915251000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to &quot;深入理解Proxy与Reflect&quot;">​</a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to &quot;监听对象的操作&quot;">​</a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</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:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</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:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.88</span></span>

assets/article_深入理解Proxy与Reflect.md.e549d08c.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1681914514000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1681915251000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};

assets/article_深入理解浏览器缓存机制.md.500174bc.lean.js

@@ -1 +1 @@
-import{_ as e,o as a,c as s,R as o}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1681914514000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),c=[n];function t(i,r,p,d,h,u){return a(),s("div",null,c)}const C=e(l,[["render",t]]);export{b as __pageData,C as default};
+import{_ as e,o as a,c as s,R as o}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1681915251000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),c=[n];function t(i,r,p,d,h,u){return a(),s("div",null,c)}const C=e(l,[["render",t]]);export{b as __pageData,C as default};

assets/article_深入理解浏览器运行原理.md.f8ce0458.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as e}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","lastUpdated":1681914514000}'),l={name:"article/深入理解浏览器运行原理.md"},p=e("",87),i=[p];function r(o,c,t,d,b,u){return a(),n("div",null,i)}const C=s(l,[["render",r]]);export{h as __pageData,C as default};
+import{_ as s,o as a,c as n,R as e}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","lastUpdated":1681915251000}'),l={name:"article/深入理解浏览器运行原理.md"},p=e("",87),i=[p];function r(o,c,t,d,b,u){return a(),n("div",null,i)}const C=s(l,[["render",r]]);export{h as __pageData,C as default};

assets/index.md.087f656e.js

@@ -1 +1 @@
-import{_ as t,o as e,c as i}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"🎓","title":"Electronic Information Major","details":"电子信息工程"},{"icon":"🎯","title":"JavaScript & TypeScript","details":"自学前端 热爱技术"},{"icon":"👆","title":"See more information","details":"访问导航栏查看更多信息"}]},"headers":[],"relativePath":"index.md","lastUpdated":1681914514000}'),a={name:"index.md"};function n(o,r,s,c,l,d){return e(),i("div")}const f=t(a,[["render",n]]);export{p as __pageData,f as default};
+import{_ as t,o as e,c as i}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"🎓","title":"Electronic Information Major","details":"电子信息工程"},{"icon":"🎯","title":"JavaScript & TypeScript","details":"自学前端 热爱技术"},{"icon":"👆","title":"See more information","details":"访问导航栏查看更多信息"}]},"headers":[],"relativePath":"index.md","lastUpdated":1681915251000}'),a={name:"index.md"};function n(o,r,s,c,l,d){return e(),i("div")}const f=t(a,[["render",n]]);export{p as __pageData,f as default};

assets/index.md.087f656e.lean.js

@@ -1 +1 @@
-import{_ as t,o as e,c as i}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"🎓","title":"Electronic Information Major","details":"电子信息工程"},{"icon":"🎯","title":"JavaScript & TypeScript","details":"自学前端 热爱技术"},{"icon":"👆","title":"See more information","details":"访问导航栏查看更多信息"}]},"headers":[],"relativePath":"index.md","lastUpdated":1681914514000}'),a={name:"index.md"};function n(o,r,s,c,l,d){return e(),i("div")}const f=t(a,[["render",n]]);export{p as __pageData,f as default};
+import{_ as t,o as e,c as i}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"主页","description":"","frontmatter":{"layout":"home","title":"主页","hero":{"name":"ZiuChen","text":"无限进步.","tagline":"Infinite Progress...","actions":[{"theme":"brand","text":"Get Started","link":"/self/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/ZiuChen"}]},"features":[{"icon":"🎓","title":"Electronic Information Major","details":"电子信息工程"},{"icon":"🎯","title":"JavaScript & TypeScript","details":"自学前端 热爱技术"},{"icon":"👆","title":"See more information","details":"访问导航栏查看更多信息"}]},"headers":[],"relativePath":"index.md","lastUpdated":1681915251000}'),a={name:"index.md"};function n(o,r,s,c,l,d){return e(),i("div")}const f=t(a,[["render",n]]);export{p as __pageData,f as default};

assets/note_CSS.md.05ff12c9.js

@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1681914514000}'),t={name:"note/CSS.md"},r=l(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to &quot;CSS基础&quot;">​</a></h1><p>CSS提供了三种方法，可以将CSS样式应用到元素上：</p><ul><li>内联样式 <ul><li>直接将样式写到元素的<code>style</code>属性上</li></ul></li><li>内部样式表 <ul><li>将样式通过<code>&lt;style&gt;</code>标签写在<code>&lt;head&gt;</code>标签中，通过选择器应用到元素上</li></ul></li><li>外部样式表 <ul><li>将样式写在外部文件如<code>style.css</code>中，再通过<code>&lt;link&gt;</code>标签引入</li></ul></li></ul><h2 id="文本样式-text" tabindex="-1">文本样式(text) <a class="header-anchor" href="#文本样式-text" aria-label="Permalink to &quot;文本样式(text)&quot;">​</a></h2><ul><li>text-decoration 框线样式 <ul><li>line-through 删除线</li><li>overline 上划线</li><li>underline 下划线</li><li>none 不设置装饰线</li></ul></li><li>text-transform <ul><li><code>text-transform</code> 属性指定如何将元素的文本大写。</li><li>它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。</li></ul></li><li>text-indent <ul><li><code>text-indent</code> 属性能定义一个块元素首行文本内容之前的缩进量。</li></ul></li><li>text-align</li><li>word/letter-spacing</li></ul><h3 id="text-align-重要" tabindex="-1">text-align（重要） <a class="header-anchor" href="#text-align-重要" aria-label="Permalink to &quot;text-align（重要）&quot;">​</a></h3><p>行内内容（例如文字）如何相对它的块父元素对齐，<code>left</code>靠左 <code>center</code>居中 <code>right</code>靠右 <code>justify</code>两端对齐</p><p>默认值为<code>left</code></p><p>需要注意的是，当子元素是<code>div</code>时，对父元素设置<code>text-align</code>是不生效的：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1681915251000}'),t={name:"note/CSS.md"},r=l(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to &quot;CSS基础&quot;">​</a></h1><p>CSS提供了三种方法，可以将CSS样式应用到元素上：</p><ul><li>内联样式 <ul><li>直接将样式写到元素的<code>style</code>属性上</li></ul></li><li>内部样式表 <ul><li>将样式通过<code>&lt;style&gt;</code>标签写在<code>&lt;head&gt;</code>标签中，通过选择器应用到元素上</li></ul></li><li>外部样式表 <ul><li>将样式写在外部文件如<code>style.css</code>中，再通过<code>&lt;link&gt;</code>标签引入</li></ul></li></ul><h2 id="文本样式-text" tabindex="-1">文本样式(text) <a class="header-anchor" href="#文本样式-text" aria-label="Permalink to &quot;文本样式(text)&quot;">​</a></h2><ul><li>text-decoration 框线样式 <ul><li>line-through 删除线</li><li>overline 上划线</li><li>underline 下划线</li><li>none 不设置装饰线</li></ul></li><li>text-transform <ul><li><code>text-transform</code> 属性指定如何将元素的文本大写。</li><li>它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。</li></ul></li><li>text-indent <ul><li><code>text-indent</code> 属性能定义一个块元素首行文本内容之前的缩进量。</li></ul></li><li>text-align</li><li>word/letter-spacing</li></ul><h3 id="text-align-重要" tabindex="-1">text-align（重要） <a class="header-anchor" href="#text-align-重要" aria-label="Permalink to &quot;text-align（重要）&quot;">​</a></h3><p>行内内容（例如文字）如何相对它的块父元素对齐，<code>left</code>靠左 <code>center</code>居中 <code>right</code>靠右 <code>justify</code>两端对齐</p><p>默认值为<code>left</code></p><p>需要注意的是，当子元素是<code>div</code>时，对父元素设置<code>text-align</code>是不生效的：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">500px</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>

assets/note_CSS.md.05ff12c9.lean.js

@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1681914514000}'),t={name:"note/CSS.md"},r=l("",535),i=[r];function D(d,y,F,C,u,b){return a(),n("div",null,i)}const A=s(t,[["render",D]]);export{h as __pageData,A as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1681915251000}'),t={name:"note/CSS.md"},r=l("",535),i=[r];function D(d,y,F,C,u,b){return a(),n("div",null,i)}const A=s(t,[["render",D]]);export{h as __pageData,A as default};

assets/note_Front-end Engineering.md.5df6bf3f.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const F=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","lastUpdated":1681914514000}'),o={name:"note/Front-end Engineering.md"},e=l("",254),p=[e];function c(r,t,i,d,y,D){return n(),a("div",null,p)}const u=s(o,[["render",c]]);export{F as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const F=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","lastUpdated":1681915251000}'),o={name:"note/Front-end Engineering.md"},e=l("",254),p=[e];function c(r,t,i,d,y,D){return n(),a("div",null,p)}const u=s(o,[["render",c]]);export{F as __pageData,u as default};

assets/note_JavaScript.md.e7937014.js

@@ -1 +1 @@
-import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1681914514000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"​")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
+import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1681915251000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"​")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};

assets/note_JavaScript.md.e7937014.lean.js

@@ -1 +1 @@
-import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1681914514000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"​")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
+import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1681915251000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"​")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};

assets/note_JavaScriptEnhanced.md.837cba3a.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1681914514000}'),F={name:"note/JavaScriptEnhanced.md"},D=l(`<h1 id="javascript-高级教程" tabindex="-1">JavaScript 高级教程 <a class="header-anchor" href="#javascript-高级教程" aria-label="Permalink to &quot;JavaScript 高级教程&quot;">​</a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to &quot;函数中this指向&quot;">​</a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</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>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1681915251000}'),F={name:"note/JavaScriptEnhanced.md"},D=l(`<h1 id="javascript-高级教程" tabindex="-1">JavaScript 高级教程 <a class="header-anchor" href="#javascript-高级教程" aria-label="Permalink to &quot;JavaScript 高级教程&quot;">​</a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to &quot;函数中this指向&quot;">​</a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</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:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#89DDFF;">()</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:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>

assets/note_JavaScriptEnhanced.md.837cba3a.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1681914514000}'),F={name:"note/JavaScriptEnhanced.md"},D=l("",668),i=[D];function A(C,b,u,d,m,h){return n(),a("div",null,i)}const E=s(F,[["render",A]]);export{g as __pageData,E as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1681915251000}'),F={name:"note/JavaScriptEnhanced.md"},D=l("",668),i=[D];function A(C,b,u,d,m,h){return n(),a("div",null,i)}const E=s(F,[["render",A]]);export{g as __pageData,E as default};

assets/note_React.md.271b7a23.js

@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1681914514000}'),e={name:"note/React.md"},t=l(`<h1 id="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-label="Permalink to &quot;React&quot;">​</a></h1><h2 id="邂逅react" tabindex="-1">邂逅React <a class="header-anchor" href="#邂逅react" aria-label="Permalink to &quot;邂逅React&quot;">​</a></h2><h3 id="react开发依赖" tabindex="-1">React开发依赖 <a class="header-anchor" href="#react开发依赖" aria-label="Permalink to &quot;React开发依赖&quot;">​</a></h3><ul><li><code>react</code> 包含React的核心代码</li><li><code>react-dom</code> 将React渲染到不同平台需要的核心代码</li><li><code>babel</code> 将JSX转换成React代码的工具</li></ul><p>为什么要拆分成这么多的包？</p><ul><li>不同的库各司其职，让库变得纯粹</li><li><code>react</code>包中包含了 React Web 和 React Native 共同拥有的<strong>核心代码</strong></li><li><code>react-dom</code> 针对Web和Native完成的事情不同 <ul><li>Web端：<code>react-dom</code>会将JSX渲染成真实DOM，展示在浏览器中</li><li>Native端：<code>react-dom</code>会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）</li></ul></li></ul><h3 id="babel与react的关系" tabindex="-1">Babel与React的关系 <a class="header-anchor" href="#babel与react的关系" aria-label="Permalink to &quot;Babel与React的关系&quot;">​</a></h3><p>Babel是什么？</p><ul><li>Babel又名Babel.js</li><li>是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）</li><li>提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法</li></ul><p>二者之间的联系</p><ul><li>默认情况下React开发可以不使用Babel</li><li>但是我们不可能使用React.createElement来编写代码</li><li>通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement</li></ul><h3 id="react初体验" tabindex="-1">React初体验 <a class="header-anchor" href="#react初体验" aria-label="Permalink to &quot;React初体验&quot;">​</a></h3><p>我们通过CDN方式引入react、react-dom、babel这三个依赖</p><p>并且创建<code>#root</code>根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1681915251000}'),e={name:"note/React.md"},t=l(`<h1 id="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-label="Permalink to &quot;React&quot;">​</a></h1><h2 id="邂逅react" tabindex="-1">邂逅React <a class="header-anchor" href="#邂逅react" aria-label="Permalink to &quot;邂逅React&quot;">​</a></h2><h3 id="react开发依赖" tabindex="-1">React开发依赖 <a class="header-anchor" href="#react开发依赖" aria-label="Permalink to &quot;React开发依赖&quot;">​</a></h3><ul><li><code>react</code> 包含React的核心代码</li><li><code>react-dom</code> 将React渲染到不同平台需要的核心代码</li><li><code>babel</code> 将JSX转换成React代码的工具</li></ul><p>为什么要拆分成这么多的包？</p><ul><li>不同的库各司其职，让库变得纯粹</li><li><code>react</code>包中包含了 React Web 和 React Native 共同拥有的<strong>核心代码</strong></li><li><code>react-dom</code> 针对Web和Native完成的事情不同 <ul><li>Web端：<code>react-dom</code>会将JSX渲染成真实DOM，展示在浏览器中</li><li>Native端：<code>react-dom</code>会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）</li></ul></li></ul><h3 id="babel与react的关系" tabindex="-1">Babel与React的关系 <a class="header-anchor" href="#babel与react的关系" aria-label="Permalink to &quot;Babel与React的关系&quot;">​</a></h3><p>Babel是什么？</p><ul><li>Babel又名Babel.js</li><li>是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）</li><li>提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法</li></ul><p>二者之间的联系</p><ul><li>默认情况下React开发可以不使用Babel</li><li>但是我们不可能使用React.createElement来编写代码</li><li>通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement</li></ul><h3 id="react初体验" tabindex="-1">React初体验 <a class="header-anchor" href="#react初体验" aria-label="Permalink to &quot;React初体验&quot;">​</a></h3><p>我们通过CDN方式引入react、react-dom、babel这三个依赖</p><p>并且创建<code>#root</code>根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://unpkg.com/react@18/umd/react.development.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://unpkg.com/react-dom@18/umd/react-dom.development.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://unpkg.com/babel-standalone@6/babel.min.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
@@ -1024,7 +1024,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
 <span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#F07178;">    )</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></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><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;">​</a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;">​</a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-CL-bx" id="tab-dUXyX9u" checked="checked"><label for="tab-dUXyX9u">context.js</label><input type="radio" name="group-CL-bx" id="tab-DgB3-Jk"><label for="tab-DgB3-Jk">App.jsx</label><input type="radio" name="group-CL-bx" id="tab-eS7BjAl"><label for="tab-eS7BjAl">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></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><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;">​</a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;">​</a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-DPh18" id="tab-ATK851J" checked="checked"><label for="tab-ATK851J">context.js</label><input type="radio" name="group-DPh18" id="tab-jjwM5KO"><label for="tab-jjwM5KO">App.jsx</label><input type="radio" name="group-DPh18" id="tab-2zeA6Hg"><label for="tab-2zeA6Hg">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> DarkModeContext </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createContext</span><span style="color:#A6ACCD;">()</span></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></div></div><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>

assets/note_React.md.271b7a23.lean.js

@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1681914514000}'),e={name:"note/React.md"},t=l("",366),c=[t];function r(F,D,y,i,C,A){return n(),a("div",null,c)}const m=s(e,[["render",r]]);export{u as __pageData,m as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1681915251000}'),e={name:"note/React.md"},t=l("",366),c=[t];function r(F,D,y,i,C,A){return n(),a("div",null,c)}const m=s(e,[["render",r]]);export{u as __pageData,m as default};

assets/note_SSR.md.d8c7859c.lean.js

@@ -1 +1 @@
-import{_ as l,o as e,c as o,R as a}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[],"relativePath":"note/SSR.md","lastUpdated":1681914514000}'),i={name:"note/SSR.md"},t=a("",80),s=[t];function n(c,r,d,p,u,h){return e(),o("div",null,s)}const g=l(i,[["render",n]]);export{D as __pageData,g as default};
+import{_ as l,o as e,c as o,R as a}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[],"relativePath":"note/SSR.md","lastUpdated":1681915251000}'),i={name:"note/SSR.md"},t=a("",80),s=[t];function n(c,r,d,p,u,h){return e(),o("div",null,s)}const g=l(i,[["render",n]]);export{D as __pageData,g as default};

assets/project_ClipboardManager_guide_index.md.cc6c27c9.lean.js

@@ -1 +1 @@
-import{_ as l,D as p,o as t,c,z as s,a,G as e,R as n}from"./chunks/framework.a304f0f7.js";const r="/assets/gi3.c83cee76.png",i="/assets/gi3-2.8cc1f8a9.png",d="/assets/gi3-3.47dffc9b.png",D="/assets/sign-mac.2c3e272f.png",u="/assets/sign-mac-2.5861d44c.png",F="/assets/mac-chmod.bf888724.jpg",y="/assets/guide-jianguo-1.a7e6fa82.png",h="/assets/guide-jianguo-2.14924b1b.png",m="/assets/gi4.e4051a3e.png",b="/assets/gi5.f517b425.png",O=JSON.parse('{"title":"使用指南","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","lastUpdated":1681914514000}'),_={name:"project/ClipboardManager/guide/index.md"},C=s("h1",{id:"使用指南",tabindex:"-1"},[a("使用指南 "),s("a",{class:"header-anchor",href:"#使用指南","aria-label":'Permalink to "使用指南"'},"​")],-1),g=s("h2",{id:"快捷键一览",tabindex:"-1"},[a("快捷键一览 "),s("a",{class:"header-anchor",href:"#快捷键一览","aria-label":'Permalink to "快捷键一览"'},"​")],-1),A=n("",6),q=s("code",null,"Ctrl/Command+鼠标左键",-1),f=n("",35),x={id:"webdav同步",tabindex:"-1"},v=s("a",{class:"header-anchor",href:"#webdav同步","aria-label":'Permalink to "WebDav同步 <Badge type="tip" text="^2.0.0" />"'},"​",-1),k=s("div",{class:"tip custom-block"},[s("p",{class:"custom-block-title"},"TIP"),s("p",null,[a("自"),s("code",null,"v2.0.0"),a("起，可以通过开通插件会员启用"),s("strong",null,"WebDav同步功能")])],-1),E=s("p",null,[a("👉👉👉"),s("a",{href:"./../vip/#webdav同步功能"},"插件会员/WebDav同步功能"),a("👈👈👈")],-1),P={id:"坚果云同步文件夹",tabindex:"-1"},w=s("a",{class:"header-anchor",href:"#坚果云同步文件夹","aria-label":'Permalink to "坚果云同步文件夹 <Badge type="warning" text="仅旧版本" />"'},"​",-1),S=n("",28);function T(j,B,N,V,W,I){const o=p("Badge");return t(),c("div",null,[C,g,s("ul",null,[A,s("li",null,[q,a("点击文本/图片/文件 直接进入预览/打开所在文件夹 "),e(o,{type:"warning",text:"插件会员"})])]),f,s("h3",x,[a("WebDav同步 "),e(o,{type:"tip",text:"^2.0.0"}),a(),v]),k,E,s("h3",P,[a("坚果云同步文件夹 "),e(o,{type:"warning",text:"仅旧版本"}),a(),w]),S])}const R=l(_,[["render",T]]);export{O as __pageData,R as default};
+import{_ as l,D as p,o as t,c,z as s,a,G as e,R as n}from"./chunks/framework.a304f0f7.js";const r="/assets/gi3.c83cee76.png",i="/assets/gi3-2.8cc1f8a9.png",d="/assets/gi3-3.47dffc9b.png",D="/assets/sign-mac.2c3e272f.png",u="/assets/sign-mac-2.5861d44c.png",F="/assets/mac-chmod.bf888724.jpg",y="/assets/guide-jianguo-1.a7e6fa82.png",h="/assets/guide-jianguo-2.14924b1b.png",m="/assets/gi4.e4051a3e.png",b="/assets/gi5.f517b425.png",O=JSON.parse('{"title":"使用指南","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","lastUpdated":1681915251000}'),_={name:"project/ClipboardManager/guide/index.md"},C=s("h1",{id:"使用指南",tabindex:"-1"},[a("使用指南 "),s("a",{class:"header-anchor",href:"#使用指南","aria-label":'Permalink to "使用指南"'},"​")],-1),g=s("h2",{id:"快捷键一览",tabindex:"-1"},[a("快捷键一览 "),s("a",{class:"header-anchor",href:"#快捷键一览","aria-label":'Permalink to "快捷键一览"'},"​")],-1),A=n("",6),q=s("code",null,"Ctrl/Command+鼠标左键",-1),f=n("",35),x={id:"webdav同步",tabindex:"-1"},v=s("a",{class:"header-anchor",href:"#webdav同步","aria-label":'Permalink to "WebDav同步 <Badge type="tip" text="^2.0.0" />"'},"​",-1),k=s("div",{class:"tip custom-block"},[s("p",{class:"custom-block-title"},"TIP"),s("p",null,[a("自"),s("code",null,"v2.0.0"),a("起，可以通过开通插件会员启用"),s("strong",null,"WebDav同步功能")])],-1),E=s("p",null,[a("👉👉👉"),s("a",{href:"./../vip/#webdav同步功能"},"插件会员/WebDav同步功能"),a("👈👈👈")],-1),P={id:"坚果云同步文件夹",tabindex:"-1"},w=s("a",{class:"header-anchor",href:"#坚果云同步文件夹","aria-label":'Permalink to "坚果云同步文件夹 <Badge type="warning" text="仅旧版本" />"'},"​",-1),S=n("",28);function T(j,B,N,V,W,I){const o=p("Badge");return t(),c("div",null,[C,g,s("ul",null,[A,s("li",null,[q,a("点击文本/图片/文件 直接进入预览/打开所在文件夹 "),e(o,{type:"warning",text:"插件会员"})])]),f,s("h3",x,[a("WebDav同步 "),e(o,{type:"tip",text:"^2.0.0"}),a(),v]),k,E,s("h3",P,[a("坚果云同步文件夹 "),e(o,{type:"warning",text:"仅旧版本"}),a(),w]),S])}const R=l(_,[["render",T]]);export{O as __pageData,R as default};

assets/project_ClipboardManager_index.md.100b1ac8.js

@@ -1 +0,0 @@
-import{D as e,o as r,c as n,G as o,a4 as d,a5 as i,z as l,R as g}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.98e788ed.png",m="/assets/11.3cd0cf4e.png",_="/assets/22.8fe09229.png",u="/assets/33.63eddf1e.png",h="/assets/44.a788d6b3.png",b="/assets/55.9e8a964d.png",f="/assets/66.54616de1.png",q="/assets/77.2791123e.png",T=l("br",null,null,-1),C=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据读写<strong>完全本地化</strong></li><li>✅ 快速<code>收藏</code>/<code>转存</code>/<code>分词</code>/<code>复制</code>/<code>删除</code>/<code>打开文件&amp;目标文件夹</code></li><li>✅ 功能按钮 定义<strong>无限可能</strong> <code>OCR识别</code> <code>百度搜索</code> <code>百度识图</code> <code>统计文本字数</code> <code>颜色管理</code> <code>识别图片中二维码</code> <code>上传到图床</code> <code>翻译</code></li><li>✅ <code>鼠标左键</code> 复制并粘贴 <code>鼠标右键</code> 仅复制</li><li>✅ 按下<code>Shift</code>或<code>空格</code>进入<strong>多选模式</strong> 连续选择多条内容合并复制 支持<strong>跨标签</strong>合并复制/粘贴</li><li>✅ 键盘 <code>↑</code> <code>↓</code> 选中历史记录，按下回车直接粘贴</li><li>✅ 键盘 <code>←</code> <code>→</code>切换分类 <code>Tab</code>键连续切换分类</li><li>✅ 使用 <code>Ctrl/Alt+数字键</code> 快速粘贴</li><li>✅ 插件内<code>输入任意字母或数字</code>自动聚焦搜索框 支持使用<code>空格</code>同时检索<strong>多个关键词</strong></li><li>✅ <strong>智慧分词</strong> 快速拖选指定内容 <strong>超级粘贴</strong> 直接转存为文件</li><li>✅ 优雅的界面动效与交互 跟随系统的深色模式</li><li>✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···</li></ul><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to &quot;📚 安装方式&quot;">​</a></h2><ul><li>官方插件市场安装</li><li>离线插件安装：<a href="https://pan.baidu.com/s/14GJIXWDU2F4jsqDDq73aFg?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul><p><a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&amp;jump_from=webapi" target="_blank" rel="noreferrer">催更群 769115389</a> <a href="https://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1681914514000}'),S={name:"project/ClipboardManager/index.md"},D=Object.assign(S,{setup(k){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,d(i(t)),null,16),T,o(a,{imgSliderList:c}),C])}}});export{x as __pageData,D as default};

assets/project_ClipboardManager_index.md.100b1ac8.lean.js

@@ -1 +0,0 @@
-import{D as e,o as r,c as n,G as o,a4 as d,a5 as i,z as l,R as g}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.98e788ed.png",m="/assets/11.3cd0cf4e.png",_="/assets/22.8fe09229.png",u="/assets/33.63eddf1e.png",h="/assets/44.a788d6b3.png",b="/assets/55.9e8a964d.png",f="/assets/66.54616de1.png",q="/assets/77.2791123e.png",T=l("br",null,null,-1),C=g("",6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1681914514000}'),S={name:"project/ClipboardManager/index.md"},D=Object.assign(S,{setup(k){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,d(i(t)),null,16),T,o(a,{imgSliderList:c}),C])}}});export{x as __pageData,D as default};

assets/project_ClipboardManager_index.md.d90b4d1d.js

@@ -0,0 +1 @@
+import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据读写<strong>完全本地化</strong></li><li>✅ 快速<code>收藏</code>/<code>转存</code>/<code>分词</code>/<code>复制</code>/<code>删除</code>/<code>打开文件&amp;目标文件夹</code></li><li>✅ 功能按钮 定义<strong>无限可能</strong> <code>OCR识别</code> <code>百度搜索</code> <code>百度识图</code> <code>统计文本字数</code> <code>颜色管理</code> <code>识别图片中二维码</code> <code>上传到图床</code> <code>翻译</code></li><li>✅ <code>鼠标左键</code> 复制并粘贴 <code>鼠标右键</code> 仅复制</li><li>✅ 按下<code>Shift</code>或<code>空格</code>进入<strong>多选模式</strong> 连续选择多条内容合并复制 支持<strong>跨标签</strong>合并复制/粘贴</li><li>✅ 键盘 <code>↑</code> <code>↓</code> 选中历史记录，按下回车直接粘贴</li><li>✅ 键盘 <code>←</code> <code>→</code>切换分类 <code>Tab</code>键连续切换分类</li><li>✅ 使用 <code>Ctrl/Alt+数字键</code> 快速粘贴</li><li>✅ 插件内<code>输入任意字母或数字</code>自动聚焦搜索框 支持使用<code>空格</code>同时检索<strong>多个关键词</strong></li><li>✅ <strong>超级Markdown</strong>合并剪贴板内容导出图文 <strong>超级粘贴</strong> 直接转存为文件 <strong>智慧分词</strong> 快速拖选指定内容</li><li>✅ 优雅的界面动效与交互 跟随系统的深色模式</li><li>✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···</li></ul><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to &quot;📚 安装方式&quot;">​</a></h2><ul><li>官方插件市场安装</li><li>离线插件安装：<a href="https://pan.baidu.com/s/14GJIXWDU2F4jsqDDq73aFg?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul><p><a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&amp;jump_from=webapi" target="_blank" rel="noreferrer">催更群 769115389</a> <a href="https://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1681915251000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};

assets/project_ClipboardManager_index.md.d90b4d1d.lean.js

@@ -0,0 +1 @@
+import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g("",6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1681915251000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};

assets/project_ClipboardManager_log_index.md.6ac9f91e.lean.js

@@ -1 +1 @@
-import{_ as l,o as i,c as a,R as e}from"./chunks/framework.a304f0f7.js";const s=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/log/index.md","lastUpdated":1681914514000}'),o={name:"project/ClipboardManager/log/index.md"},t=e("",141),d=[t];function r(c,h,f,u,v,n){return i(),a("div",null,d)}const p=l(o,[["render",r]]);export{s as __pageData,p as default};
+import{_ as l,o as i,c as a,R as e}from"./chunks/framework.a304f0f7.js";const s=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/log/index.md","lastUpdated":1681915251000}'),o={name:"project/ClipboardManager/log/index.md"},t=e("",141),d=[t];function r(c,h,f,u,v,n){return i(),a("div",null,d)}const p=l(o,[["render",r]]);export{s as __pageData,p as default};

assets/project_ClipboardManager_statement_index.md.4970dd53.lean.js

@@ -1 +1 @@
-import{_ as a,o as e,c as o,R as l}from"./chunks/framework.a304f0f7.js";const _=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/ClipboardManager/statement/index.md","lastUpdated":1681914514000}'),r={name:"project/ClipboardManager/statement/index.md"},i=l("",31),t=[i];function d(n,c,s,h,p,u){return e(),o("div",null,t)}const m=a(r,[["render",d]]);export{_ as __pageData,m as default};
+import{_ as a,o as e,c as o,R as l}from"./chunks/framework.a304f0f7.js";const _=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/ClipboardManager/statement/index.md","lastUpdated":1681915251000}'),r={name:"project/ClipboardManager/statement/index.md"},i=l("",31),t=[i];function d(n,c,s,h,p,u){return e(),o("div",null,t)}const m=a(r,[["render",d]]);export{_ as __pageData,m as default};

assets/project_ClipboardManager_vip_index.md.77ebbcec.lean.js

@@ -1 +1 @@
-import{_ as i,D as c,o as s,c as n,z as e,a as l,G as o,R as a}from"./chunks/framework.a304f0f7.js";const r="/assets/vip-webdav.2e7c539c.png",d="/assets/vip-highlight.e3827906.png",R=JSON.parse('{"title":"插件会员","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/vip/index.md","lastUpdated":1681914514000}'),p={name:"project/ClipboardManager/vip/index.md"},h=a("",3),u=e("strong",null,"插件会员",-1),_=e("code",null,"WebDav数据多端同步",-1),g=e("code",null,"支持保存2000条历史记录",-1),b=e("code",null,"不限制历史记录过期时间",-1),m=e("code",null,"文本/图片/文件预览增强, 按住Ctrl/Command点击 解锁更多操作",-1),k=e("code",null,"键盘操作模式 屏蔽鼠标 高效快捷",-1),v=e("code",null,"简洁模式 隐藏页面中不必要的组件与元素",-1),f=e("code",null,"自定义分类排序",-1),x=e("code",null,"预览页代码高亮",-1),T=e("code",null,"关闭剪贴板图片记录",-1),q=e("code",null,"插件使用统计",-1),D=e("li",null,[e("strong",null,"...")],-1),y=e("strong",null,"uTools会员",-1),N=e("code",null,"插件使用统计",-1),C=a("",21);function P(w,W,j,S,V,A){const t=c("Badge");return s(),n("div",null,[h,e("ul",null,[e("li",null,[u,e("ul",null,[e("li",null,[_,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[g,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[b,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[m,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[k,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[v,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[f,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[x,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[T,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[q,l(),o(t,{type:"tip",text:"已上线"})]),D])]),e("li",null,[y,e("ul",null,[e("li",null,[N,l(),o(t,{type:"tip",text:"已上线"})])])])]),C])}const B=i(p,[["render",P]]);export{R as __pageData,B as default};
+import{_ as i,D as c,o as s,c as n,z as e,a as l,G as o,R as a}from"./chunks/framework.a304f0f7.js";const r="/assets/vip-webdav.2e7c539c.png",d="/assets/vip-highlight.e3827906.png",R=JSON.parse('{"title":"插件会员","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/vip/index.md","lastUpdated":1681915251000}'),p={name:"project/ClipboardManager/vip/index.md"},h=a("",3),u=e("strong",null,"插件会员",-1),_=e("code",null,"WebDav数据多端同步",-1),g=e("code",null,"支持保存2000条历史记录",-1),b=e("code",null,"不限制历史记录过期时间",-1),m=e("code",null,"文本/图片/文件预览增强, 按住Ctrl/Command点击 解锁更多操作",-1),k=e("code",null,"键盘操作模式 屏蔽鼠标 高效快捷",-1),v=e("code",null,"简洁模式 隐藏页面中不必要的组件与元素",-1),f=e("code",null,"自定义分类排序",-1),x=e("code",null,"预览页代码高亮",-1),T=e("code",null,"关闭剪贴板图片记录",-1),q=e("code",null,"插件使用统计",-1),D=e("li",null,[e("strong",null,"...")],-1),y=e("strong",null,"uTools会员",-1),N=e("code",null,"插件使用统计",-1),C=a("",21);function P(w,W,j,S,V,A){const t=c("Badge");return s(),n("div",null,[h,e("ul",null,[e("li",null,[u,e("ul",null,[e("li",null,[_,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[g,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[b,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[m,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[k,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[v,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[f,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[x,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[T,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[q,l(),o(t,{type:"tip",text:"已上线"})]),D])]),e("li",null,[y,e("ul",null,[e("li",null,[N,l(),o(t,{type:"tip",text:"已上线"})])])])]),C])}const B=i(p,[["render",P]]);export{R as __pageData,B as default};

assets/project_JSRunner_index.md.ab937939.js

@@ -1 +1 @@
-import{D as t,o as r,c,G as s,a4 as d,a5 as m,z as e,a}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.df975406.png",g="/assets/img1.49b1ec51.png",u="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",f="/assets/img4.cd285ff7.png",S=e("br",null,null,-1),b=e("h2",{id:"🔰-开始使用",tabindex:"-1"},[a("🔰 开始使用 "),e("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"​")],-1),h=e("ul",null,[e("li",null,"运行JavaScript代码 快速验证代码逻辑"),e("li",null,"支持切换NodeJS/浏览器运行环境"),e("li",null,[e("code",null,"Ctrl/Command+R"),a(" 快速运行代码")]),e("li",null,"支持代码回溯 实时记录代码运行历史"),e("li",null,"支持手动触发代码运行/实时运行代码"),e("li",null,"适配深色模式")],-1),P=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1681914514000}'),v={name:"project/JSRunner/index.md"},R=Object.assign(v,{setup(J){const n={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:p,linkList:[{content:"🚚 更新日志",target:"./log/"}]},l=[{src:g},{src:u},{src:_},{src:f}];return(x,N)=>{const o=t("Title"),i=t("ImgSlider");return r(),c("div",null,[s(o,d(m(n)),null,16),S,s(i,{imgSliderList:l}),b,h])}}});export{P as __pageData,R as default};
+import{D as t,o as r,c,G as s,a4 as d,a5 as m,z as e,a}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.df975406.png",g="/assets/img1.49b1ec51.png",u="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",f="/assets/img4.cd285ff7.png",S=e("br",null,null,-1),b=e("h2",{id:"🔰-开始使用",tabindex:"-1"},[a("🔰 开始使用 "),e("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"​")],-1),h=e("ul",null,[e("li",null,"运行JavaScript代码 快速验证代码逻辑"),e("li",null,"支持切换NodeJS/浏览器运行环境"),e("li",null,[e("code",null,"Ctrl/Command+R"),a(" 快速运行代码")]),e("li",null,"支持代码回溯 实时记录代码运行历史"),e("li",null,"支持手动触发代码运行/实时运行代码"),e("li",null,"适配深色模式")],-1),P=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1681915251000}'),v={name:"project/JSRunner/index.md"},R=Object.assign(v,{setup(J){const n={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:p,linkList:[{content:"🚚 更新日志",target:"./log/"}]},l=[{src:g},{src:u},{src:_},{src:f}];return(x,N)=>{const o=t("Title"),i=t("ImgSlider");return r(),c("div",null,[s(o,d(m(n)),null,16),S,s(i,{imgSliderList:l}),b,h])}}});export{P as __pageData,R as default};

assets/project_JSRunner_index.md.ab937939.lean.js

@@ -1 +1 @@
-import{D as t,o as r,c,G as s,a4 as d,a5 as m,z as e,a}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.df975406.png",g="/assets/img1.49b1ec51.png",u="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",f="/assets/img4.cd285ff7.png",S=e("br",null,null,-1),b=e("h2",{id:"🔰-开始使用",tabindex:"-1"},[a("🔰 开始使用 "),e("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"​")],-1),h=e("ul",null,[e("li",null,"运行JavaScript代码 快速验证代码逻辑"),e("li",null,"支持切换NodeJS/浏览器运行环境"),e("li",null,[e("code",null,"Ctrl/Command+R"),a(" 快速运行代码")]),e("li",null,"支持代码回溯 实时记录代码运行历史"),e("li",null,"支持手动触发代码运行/实时运行代码"),e("li",null,"适配深色模式")],-1),P=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1681914514000}'),v={name:"project/JSRunner/index.md"},R=Object.assign(v,{setup(J){const n={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:p,linkList:[{content:"🚚 更新日志",target:"./log/"}]},l=[{src:g},{src:u},{src:_},{src:f}];return(x,N)=>{const o=t("Title"),i=t("ImgSlider");return r(),c("div",null,[s(o,d(m(n)),null,16),S,s(i,{imgSliderList:l}),b,h])}}});export{P as __pageData,R as default};
+import{D as t,o as r,c,G as s,a4 as d,a5 as m,z as e,a}from"./chunks/framework.a304f0f7.js";const p="/assets/logo.df975406.png",g="/assets/img1.49b1ec51.png",u="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",f="/assets/img4.cd285ff7.png",S=e("br",null,null,-1),b=e("h2",{id:"🔰-开始使用",tabindex:"-1"},[a("🔰 开始使用 "),e("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"​")],-1),h=e("ul",null,[e("li",null,"运行JavaScript代码 快速验证代码逻辑"),e("li",null,"支持切换NodeJS/浏览器运行环境"),e("li",null,[e("code",null,"Ctrl/Command+R"),a(" 快速运行代码")]),e("li",null,"支持代码回溯 实时记录代码运行历史"),e("li",null,"支持手动触发代码运行/实时运行代码"),e("li",null,"适配深色模式")],-1),P=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1681915251000}'),v={name:"project/JSRunner/index.md"},R=Object.assign(v,{setup(J){const n={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:p,linkList:[{content:"🚚 更新日志",target:"./log/"}]},l=[{src:g},{src:u},{src:_},{src:f}];return(x,N)=>{const o=t("Title"),i=t("ImgSlider");return r(),c("div",null,[s(o,d(m(n)),null,16),S,s(i,{imgSliderList:l}),b,h])}}});export{P as __pageData,R as default};

assets/project_JSRunner_log_index.md.d307d8c7.js

@@ -1 +1 @@
-import{_ as t,o as n,c as o,z as e,a}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1681914514000}'),r={name:"project/JSRunner/log/index.md"},s=e("h1",{id:"更新日志",tabindex:"-1"},[a("更新日志 "),e("a",{class:"header-anchor",href:"#更新日志","aria-label":'Permalink to "更新日志"'},"​")],-1),c=e("h2",{id:"v1-0-0",tabindex:"-1"},[a("v1.0.0 "),e("a",{class:"header-anchor",href:"#v1-0-0","aria-label":'Permalink to "v1.0.0"'},"​")],-1),l=e("p",null,[e("code",null,"2023-04-19")],-1),d=e("ul",null,[e("li",null,"插件发布")],-1),i=[s,c,l,d];function _(h,p,u,m,f,x){return n(),o("div",null,i)}const k=t(r,[["render",_]]);export{b as __pageData,k as default};
+import{_ as t,o as n,c as o,z as e,a}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1681915251000}'),r={name:"project/JSRunner/log/index.md"},s=e("h1",{id:"更新日志",tabindex:"-1"},[a("更新日志 "),e("a",{class:"header-anchor",href:"#更新日志","aria-label":'Permalink to "更新日志"'},"​")],-1),c=e("h2",{id:"v1-0-0",tabindex:"-1"},[a("v1.0.0 "),e("a",{class:"header-anchor",href:"#v1-0-0","aria-label":'Permalink to "v1.0.0"'},"​")],-1),l=e("p",null,[e("code",null,"2023-04-19")],-1),d=e("ul",null,[e("li",null,"插件发布")],-1),i=[s,c,l,d];function _(h,p,u,m,f,x){return n(),o("div",null,i)}const k=t(r,[["render",_]]);export{b as __pageData,k as default};

assets/project_JSRunner_log_index.md.d307d8c7.lean.js

@@ -1 +1 @@
-import{_ as t,o as n,c as o,z as e,a}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1681914514000}'),r={name:"project/JSRunner/log/index.md"},s=e("h1",{id:"更新日志",tabindex:"-1"},[a("更新日志 "),e("a",{class:"header-anchor",href:"#更新日志","aria-label":'Permalink to "更新日志"'},"​")],-1),c=e("h2",{id:"v1-0-0",tabindex:"-1"},[a("v1.0.0 "),e("a",{class:"header-anchor",href:"#v1-0-0","aria-label":'Permalink to "v1.0.0"'},"​")],-1),l=e("p",null,[e("code",null,"2023-04-19")],-1),d=e("ul",null,[e("li",null,"插件发布")],-1),i=[s,c,l,d];function _(h,p,u,m,f,x){return n(),o("div",null,i)}const k=t(r,[["render",_]]);export{b as __pageData,k as default};
+import{_ as t,o as n,c as o,z as e,a}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1681915251000}'),r={name:"project/JSRunner/log/index.md"},s=e("h1",{id:"更新日志",tabindex:"-1"},[a("更新日志 "),e("a",{class:"header-anchor",href:"#更新日志","aria-label":'Permalink to "更新日志"'},"​")],-1),c=e("h2",{id:"v1-0-0",tabindex:"-1"},[a("v1.0.0 "),e("a",{class:"header-anchor",href:"#v1-0-0","aria-label":'Permalink to "v1.0.0"'},"​")],-1),l=e("p",null,[e("code",null,"2023-04-19")],-1),d=e("ul",null,[e("li",null,"插件发布")],-1),i=[s,c,l,d];function _(h,p,u,m,f,x){return n(),o("div",null,i)}const k=t(r,[["render",_]]);export{b as __pageData,k as default};

assets/project_Markdown_index.md.4e4539a8.js

@@ -1 +1 @@
-import{D as t,o as n,c as l,G as e,a4 as r,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.715ef8d7.png",p="/assets/img2.446c4d69.png",u="/assets/img3.78c806d9.png",h=d("br",null,null,-1),k=_('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><ul><li>由ByteMD强力驱动，功能丰富、性能强劲</li><li>支持GFM扩展语法、脚注、Gemoji、KaTeX数学公式、Mermaid图表</li><li>支持通过Frontmatter设置多种主题、代码高亮样式</li><li>支持多级目录，目录支持无限嵌套</li><li>支持通过粘贴/拖拽的方式批量上传图片、支持截取屏幕截图</li><li>支持Markdown文件的批量导入、批量导出</li><li>支持插件多开，同时编辑/参考多个文章</li><li>支持实时同步预览、自动保存</li></ul>',2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1681914514000}'),T={name:"project/Markdown/index.md"},P=Object.assign(T,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(M,S)=>{const s=t("Title"),i=t("ImgSlider");return n(),l("div",null,[e(s,r(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
+import{D as e,o as n,c as l,G as t,a4 as r,a5 as c,z as _,R as d}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=_("br",null,null,-1),k=d('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><ul><li>由ByteMD强力驱动，功能丰富、性能强劲</li><li>支持GFM扩展语法、脚注、Gemoji、KaTeX数学公式、Mermaid图表</li><li>支持通过Frontmatter设置多种主题、代码高亮样式</li><li>支持多级目录，目录支持无限嵌套</li><li>支持通过粘贴/拖拽的方式批量上传图片、支持截取屏幕截图</li><li>支持Markdown文件的批量导入、批量导出</li><li>支持插件多开，同时编辑/参考多个文章</li><li>支持实时同步预览、自动保存</li></ul>',2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1681915251000}'),T={name:"project/Markdown/index.md"},P=Object.assign(T,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(M,S)=>{const s=e("Title"),i=e("ImgSlider");return n(),l("div",null,[t(s,r(c(a)),null,16),h,t(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};

assets/project_Markdown_index.md.4e4539a8.lean.js

@@ -1 +1 @@
-import{D as t,o as n,c as l,G as e,a4 as r,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.715ef8d7.png",p="/assets/img2.446c4d69.png",u="/assets/img3.78c806d9.png",h=d("br",null,null,-1),k=_("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1681914514000}'),T={name:"project/Markdown/index.md"},P=Object.assign(T,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(M,S)=>{const s=t("Title"),i=t("ImgSlider");return n(),l("div",null,[e(s,r(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
+import{D as e,o as n,c as l,G as t,a4 as r,a5 as c,z as _,R as d}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=_("br",null,null,-1),k=d("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1681915251000}'),T={name:"project/Markdown/index.md"},P=Object.assign(T,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(M,S)=>{const s=e("Title"),i=e("ImgSlider");return n(),l("div",null,[t(s,r(c(a)),null,16),h,t(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};

assets/project_Markdown_log_index.md.d32060a2.js

@@ -1 +1 @@
-import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1681914514000}'),t={name:"project/Markdown/log/index.md"},o=l('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-1-3" tabindex="-1">v1.1.3 <a class="header-anchor" href="#v1-1-3" aria-label="Permalink to &quot;v1.1.3&quot;">​</a></h2><p><code>2023-04-17</code></p><ul><li>feat: 优化侧栏操作逻辑</li><li>fix: 修正XML标签代码高亮异常的问题</li><li>fix: 修正侧栏滚动条样式</li></ul><h2 id="v1-1-2" tabindex="-1">v1.1.2 <a class="header-anchor" href="#v1-1-2" aria-label="Permalink to &quot;v1.1.2&quot;">​</a></h2><p><code>2023-04-12</code></p><ul><li>feat: 调整合并图文导出关键字定义</li><li>feat: 新建文章自动在标题跟随日期</li><li>fix: 优化不同场景下编辑器聚焦行为</li></ul><h2 id="v1-1-1" tabindex="-1">v1.1.1 <a class="header-anchor" href="#v1-1-1" aria-label="Permalink to &quot;v1.1.1&quot;">​</a></h2><p><code>2023-04-10</code></p><ul><li>fix: 调整插件描述</li><li>fix: 修复关键字跳转问题</li><li>fix: 移除页面切换动效</li></ul><h2 id="v1-1-0" tabindex="-1">v1.1.0 <a class="header-anchor" href="#v1-1-0" aria-label="Permalink to &quot;v1.1.0&quot;">​</a></h2><p><code>2023-04-09</code></p><ul><li>feat: 支持通过关键字创建文章</li><li>feat: 支持从超级剪贴板多选合并创建文章</li><li>feat: 支持从文本/图片快速创建文章</li><li>feat: 支持批量导入Markdown文档</li><li>feat: 支持点击设置页关键字跳转</li><li>fix: 修复脚标点击跳转问题</li><li>fix: 修复部分场景下滚动条样式问题</li><li>fix: 修复部分场景下工具栏展示问题</li></ul><h2 id="v1-0-1" tabindex="-1">v1.0.1 <a class="header-anchor" href="#v1-0-1" aria-label="Permalink to &quot;v1.0.1&quot;">​</a></h2><p><code>2023-04-05</code></p><ul><li>feat: 支持插件多开 同时编辑/参考多个文档</li><li>fix: 修复图片被滚动条遮挡的问题</li><li>fix: 修复部分场景下标题栏与侧栏的bug</li></ul><h2 id="v1-0-0" tabindex="-1">v1.0.0 <a class="header-anchor" href="#v1-0-0" aria-label="Permalink to &quot;v1.0.0&quot;">​</a></h2><p><code>2023-04-01</code></p><ul><li>插件发布</li></ul>',19),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const v=a(t,[["render",d]]);export{p as __pageData,v as default};
+import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1681915251000}'),t={name:"project/Markdown/log/index.md"},o=l('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-1-3" tabindex="-1">v1.1.3 <a class="header-anchor" href="#v1-1-3" aria-label="Permalink to &quot;v1.1.3&quot;">​</a></h2><p><code>2023-04-17</code></p><ul><li>feat: 优化侧栏操作逻辑</li><li>fix: 修正XML标签代码高亮异常的问题</li><li>fix: 修正侧栏滚动条样式</li></ul><h2 id="v1-1-2" tabindex="-1">v1.1.2 <a class="header-anchor" href="#v1-1-2" aria-label="Permalink to &quot;v1.1.2&quot;">​</a></h2><p><code>2023-04-12</code></p><ul><li>feat: 调整合并图文导出关键字定义</li><li>feat: 新建文章自动在标题跟随日期</li><li>fix: 优化不同场景下编辑器聚焦行为</li></ul><h2 id="v1-1-1" tabindex="-1">v1.1.1 <a class="header-anchor" href="#v1-1-1" aria-label="Permalink to &quot;v1.1.1&quot;">​</a></h2><p><code>2023-04-10</code></p><ul><li>fix: 调整插件描述</li><li>fix: 修复关键字跳转问题</li><li>fix: 移除页面切换动效</li></ul><h2 id="v1-1-0" tabindex="-1">v1.1.0 <a class="header-anchor" href="#v1-1-0" aria-label="Permalink to &quot;v1.1.0&quot;">​</a></h2><p><code>2023-04-09</code></p><ul><li>feat: 支持通过关键字创建文章</li><li>feat: 支持从超级剪贴板多选合并创建文章</li><li>feat: 支持从文本/图片快速创建文章</li><li>feat: 支持批量导入Markdown文档</li><li>feat: 支持点击设置页关键字跳转</li><li>fix: 修复脚标点击跳转问题</li><li>fix: 修复部分场景下滚动条样式问题</li><li>fix: 修复部分场景下工具栏展示问题</li></ul><h2 id="v1-0-1" tabindex="-1">v1.0.1 <a class="header-anchor" href="#v1-0-1" aria-label="Permalink to &quot;v1.0.1&quot;">​</a></h2><p><code>2023-04-05</code></p><ul><li>feat: 支持插件多开 同时编辑/参考多个文档</li><li>fix: 修复图片被滚动条遮挡的问题</li><li>fix: 修复部分场景下标题栏与侧栏的bug</li></ul><h2 id="v1-0-0" tabindex="-1">v1.0.0 <a class="header-anchor" href="#v1-0-0" aria-label="Permalink to &quot;v1.0.0&quot;">​</a></h2><p><code>2023-04-01</code></p><ul><li>插件发布</li></ul>',19),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const v=a(t,[["render",d]]);export{p as __pageData,v as default};

assets/project_Markdown_log_index.md.d32060a2.lean.js

@@ -1 +1 @@
-import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1681914514000}'),t={name:"project/Markdown/log/index.md"},o=l("",19),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const v=a(t,[["render",d]]);export{p as __pageData,v as default};
+import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1681915251000}'),t={name:"project/Markdown/log/index.md"},o=l("",19),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const v=a(t,[["render",d]]);export{p as __pageData,v as default};