study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-12-18 00:44:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@3c33902409 🚀

Browse Source
This commit is contained in:
ZiuChen
2024-04-09 12:37:51 +00:00
parent e7b9ecbb8d
commit e7a495c76d
134 changed files with 547 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
404.html
View File

File diff suppressed because one or more lines are too long

6
article/【2023】青训营 - 前端练习题汇总解析.html
View File

File diff suppressed because one or more lines are too long

6
article/【字节跳动】前端面试题总结.html
View File

File diff suppressed because one or more lines are too long

6
article/【快手】深入理解前端面试题.html
View File

File diff suppressed because one or more lines are too long

6
article/【用友金融】前端面试题总结.html
View File

File diff suppressed because one or more lines are too long

6
article/一文读懂事件冒泡与事件捕获.html
View File

File diff suppressed because one or more lines are too long

6
article/一文读懂伪类与伪元素.html
View File

File diff suppressed because one or more lines are too long

6
article/一文读懂函数中this指向问题.html
View File

File diff suppressed because one or more lines are too long

6
article/从0实现一个年度报告.html
View File

File diff suppressed because one or more lines are too long

6
article/彻底搞懂对象的数据属性描述符、存储属性描述符.html
View File

File diff suppressed because one or more lines are too long

6
article/浅析defineProperty与Proxy实现的双向绑定.html
View File

File diff suppressed because one or more lines are too long

6
article/深入JavaScript数据类型.html
View File

File diff suppressed because one or more lines are too long

6
article/深入Vue3源码，看看Vue.use后究竟发生了什么？.html
View File

File diff suppressed because one or more lines are too long

6
article/深入理解Proxy与Reflect.html
View File

File diff suppressed because one or more lines are too long

6
article/深入理解浏览器缓存机制.html
View File

File diff suppressed because one or more lines are too long

6
article/深入理解浏览器运行原理.html
View File

File diff suppressed because one or more lines are too long

2
assets/article_【2023】青训营 - 前端练习题汇总解析.md.CNTN0OWe.js → assets/article_【2023】青训营 - 前端练习题汇总解析.md.CNe_IalX.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as a,o as n,ai as i}from"./chunks/framework.BFSS5Pox.js";const u=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1712579063000}'),l={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},p=i(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>选择题 1： </span></span>
import{_ as s,c as a,o as n,ai as i}from"./chunks/framework.BFSS5Pox.js";const u=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","filePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1712666210000}'),l={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},p=i(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>选择题 1： </span></span>
<span class="line"><span>下列哪些是 HTML5 的新特性？ </span></span>
<span class="line"><span>A. 语义标签 </span></span>
<span class="line"><span>B. Canvas 绘图 </span></span>

2
assets/article_【2023】青训营 - 前端练习题汇总解析.md.CNTN0OWe.lean.js → assets/article_【2023】青训营 - 前端练习题汇总解析.md.CNe_IalX.lean.js
View File

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

2
assets/article_【字节跳动】前端面试题总结.md.Dqu6hZYA.js → assets/article_【字节跳动】前端面试题总结.md.DAjPCncR.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const o=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1712579063000}'),l={name:"article/【字节跳动】前端面试题总结.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>[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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, b] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> []</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const o=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","filePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1712666210000}'),l={name:"article/【字节跳动】前端面试题总结.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>[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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, b] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> []</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a, 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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>

2
assets/article_【字节跳动】前端面试题总结.md.Dqu6hZYA.lean.js → assets/article_【字节跳动】前端面试题总结.md.DAjPCncR.lean.js
View File

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

2
assets/article_【快手】深入理解前端面试题.md.BP5OZBK-.js → assets/article_【快手】深入理解前端面试题.md.Dq289QN9.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","filePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1712579063000}'),l={name:"article/【快手】深入理解前端面试题.md"},e=n(`<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 生命周期" loading="lazy"></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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> obj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","filePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1712666210000}'),l={name:"article/【快手】深入理解前端面试题.md"},e=n(`<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 生命周期" loading="lazy"></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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> obj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Ziu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>

2
assets/article_【快手】深入理解前端面试题.md.BP5OZBK-.lean.js → assets/article_【快手】深入理解前端面试题.md.Dq289QN9.lean.js
View File

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

2
assets/article_【用友金融】前端面试题总结.md.B5eZbbGg.js → assets/article_【用友金融】前端面试题总结.md.C7J4tMUo.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1712579063000}'),l={name:"article/【用友金融】前端面试题总结.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1712666210000}'),l={name:"article/【用友金融】前端面试题总结.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})();</span></span>
<span class="line"></span>

2
assets/article_【用友金融】前端面试题总结.md.B5eZbbGg.lean.js → assets/article_【用友金融】前端面试题总结.md.C7J4tMUo.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1712579063000}'),l={name:"article/【用友金融】前端面试题总结.md"},e=n("",71),p=[e];function h(t,r,k,d,c,o){return a(),i("div",null,p)}const b=s(l,[["render",h]]);export{g as __pageData,b as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","filePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1712666210000}'),l={name:"article/【用友金融】前端面试题总结.md"},e=n("",71),p=[e];function h(t,r,k,d,c,o){return a(),i("div",null,p)}const b=s(l,[["render",h]]);export{g as __pageData,b as default};

2
assets/article_一文读懂事件冒泡与事件捕获.md.bYk0q5-7.js → assets/article_一文读懂事件冒泡与事件捕获.md.CxeWhH3i.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1712579063000}'),n={name:"article/一文读懂事件冒泡与事件捕获.md"},t=e(`<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" loading="lazy"></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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&gt; 捕获 click div1</span></span>
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","filePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1712666210000}'),n={name:"article/一文读懂事件冒泡与事件捕获.md"},t=e(`<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" loading="lazy"></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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&gt; 捕获 click div1</span></span>
<span class="line"><span>&gt; 捕获 click div2</span></span>
<span class="line"><span>&gt; 捕获 click div3</span></span>
<span class="line"><span>&gt; 冒泡 click div3</span></span>

2
assets/article_一文读懂事件冒泡与事件捕获.md.bYk0q5-7.lean.js → assets/article_一文读懂事件冒泡与事件捕获.md.CxeWhH3i.lean.js
View File

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

2
assets/article_一文读懂伪类与伪元素.md.B9oPTDwr.js → assets/article_一文读懂伪类与伪元素.md.Bb04e5X_.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1712579063000}'),l={name:"article/一文读懂伪类与伪元素.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","filePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1712666210000}'),l={name:"article/一文读懂伪类与伪元素.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:not</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>

2
assets/article_一文读懂伪类与伪元素.md.B9oPTDwr.lean.js → assets/article_一文读懂伪类与伪元素.md.Bb04e5X_.lean.js
View File

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

2
assets/article_一文读懂函数中this指向问题.md.DNvECVr5.js → assets/article_一文读懂函数中this指向问题.md.DwaYwNc1.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as n,o as a,ai as p}from"./chunks/framework.BFSS5Pox.js";const h=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1712579063000}'),e={name:"article/一文读懂函数中this指向问题.md"},l=p(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>// 定义一个函数</span></span>
import{_ as s,c as n,o as a,ai as p}from"./chunks/framework.BFSS5Pox.js";const h=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","filePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1712666210000}'),e={name:"article/一文读懂函数中this指向问题.md"},l=p(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>// 定义一个函数</span></span>
<span class="line"><span>function foo() {</span></span>
<span class="line"><span>  console.log(this)</span></span>
<span class="line"><span>}</span></span>

2
assets/article_一文读懂函数中this指向问题.md.DNvECVr5.lean.js → assets/article_一文读懂函数中this指向问题.md.DwaYwNc1.lean.js
View File

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

2
assets/article_从0实现一个年度报告.md.QQszpQgG.js → assets/article_从0实现一个年度报告.md.DDNH2kw-.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","filePath":"article/从0实现一个年度报告.md","lastUpdated":1712579063000}'),l={name:"article/从0实现一个年度报告.md"},h=n(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>- 用户名</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","filePath":"article/从0实现一个年度报告.md","lastUpdated":1712666210000}'),l={name:"article/从0实现一个年度报告.md"},h=n(`<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- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>- 用户名</span></span>
<span class="line"><span>- 注册时间 距今天数</span></span>
<span class="line"><span>- 创作相关</span></span>
<span class="line"><span> - 发布文章数</span></span>

2
assets/article_从0实现一个年度报告.md.QQszpQgG.lean.js → assets/article_从0实现一个年度报告.md.DDNH2kw-.lean.js
View File

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

2
assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md._M5SEvz2.js → assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.CL98BW9V.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const o=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1712579063000}'),l={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const o=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","filePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1712666210000}'),l={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ziu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>

2
assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md._M5SEvz2.lean.js → assets/article_彻底搞懂对象的数据属性描述符、存储属性描述符.md.CL98BW9V.lean.js
View File

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

2
assets/article_浅析defineProperty与Proxy实现的双向绑定.md.BqFMLIZv.js → assets/article_浅析defineProperty与Proxy实现的双向绑定.md.B9QrUViB.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1712579063000}'),n={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},t=e(`<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" loading="lazy"></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" loading="lazy"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1712666210000}'),n={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},t=e(`<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" loading="lazy"></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" loading="lazy"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;input&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">vm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hello, World.&#39;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Modify vm.text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vBox&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

2
assets/article_浅析defineProperty与Proxy实现的双向绑定.md.BqFMLIZv.lean.js → assets/article_浅析defineProperty与Proxy实现的双向绑定.md.B9QrUViB.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1712579063000}'),n={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},t=e("",20),p=[t];function l(h,r,k,E,d,o){return a(),i("div",null,p)}const y=s(n,[["render",l]]);export{g as __pageData,y as default};
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const g=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","filePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1712666210000}'),n={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},t=e("",20),p=[t];function l(h,r,k,E,d,o){return a(),i("div",null,p)}const y=s(n,[["render",l]]);export{g as __pageData,y as default};

2
assets/article_深入JavaScript数据类型.md.BORtRlqe.js → assets/article_深入JavaScript数据类型.md.0QQvKcqa.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const t="/assets/Object.prototype.toString.CjFLIGI9.png",y=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1712579063000}'),l={name:"article/深入JavaScript数据类型.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const t="/assets/Object.prototype.toString.CjFLIGI9.png",y=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","filePath":"article/深入JavaScript数据类型.md","lastUpdated":1712666210000}'),l={name:"article/深入JavaScript数据类型.md"},e=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 而 null 与 object 通过 typeof 运算得到的都是 &#39;object&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> targets</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Ziu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Symbol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
<span class="line"></span>

2
assets/article_深入JavaScript数据类型.md.BORtRlqe.lean.js → assets/article_深入JavaScript数据类型.md.0QQvKcqa.lean.js
View File

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

2
assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.DvsNc5Ge.js → assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.wYUh_Ai6.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1712579063000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},l=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","filePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1712666210000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},l=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> CustomInput </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/component/CustomInput.vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>

2
assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.DvsNc5Ge.lean.js → assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.wYUh_Ai6.lean.js
View File

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

2
assets/article_深入理解Proxy与Reflect.md.X-ZoMQp2.js → assets/article_深入理解Proxy与Reflect.md.DBYLLHLJ.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1712579063000}'),l={name:"article/深入理解Proxy与Reflect.md"},p=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> obj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1712666210000}'),l={name:"article/深入理解Proxy与Reflect.md"},p=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> obj</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ziu&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.88</span></span>

2
assets/article_深入理解Proxy与Reflect.md.X-ZoMQp2.lean.js → assets/article_深入理解Proxy与Reflect.md.DBYLLHLJ.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1712579063000}'),l={name:"article/深入理解Proxy与Reflect.md"},p=n("",44),e=[p];function h(k,t,r,E,d,g){return a(),i("div",null,e)}const F=s(l,[["render",h]]);export{c as __pageData,F as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","filePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1712666210000}'),l={name:"article/深入理解Proxy与Reflect.md"},p=n("",44),e=[p];function h(k,t,r,E,d,g){return a(),i("div",null,e)}const F=s(l,[["render",h]]);export{c as __pageData,F as default};

2
assets/article_深入理解浏览器缓存机制.md.cLXqS2vb.js → assets/article_深入理解浏览器缓存机制.md.D7OH_zth.js
View File

File diff suppressed because one or more lines are too long

2
assets/article_深入理解浏览器缓存机制.md.cLXqS2vb.lean.js → assets/article_深入理解浏览器缓存机制.md.D7OH_zth.lean.js
View File

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

2
assets/article_深入理解浏览器运行原理.md.BrsRwQI-.js → assets/article_深入理解浏览器运行原理.md.DbPVvQ_H.js
View File

File diff suppressed because one or more lines are too long

2
assets/article_深入理解浏览器运行原理.md.BrsRwQI-.lean.js → assets/article_深入理解浏览器运行原理.md.DbPVvQ_H.lean.js
View File

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

2
assets/demos_promiseify-post-message_index.md.pKnP7cZ9.js → assets/demos_promiseify-post-message_index.md.B37AW66D.js
View File

@@ -1 +1 @@
import{d as f,h as l,l as _,o as c,c as d,m as o,q as u,s as h,_ as g,J as y,a as v}from"./chunks/framework.BFSS5Pox.js";function x(e){window.addEventListener("message",async s=>{var i;const a=s.data,n=a.namespace,m=a.action,r=(i=t==null?void 0:t[n])==null?void 0:i[m];if(r){const p=await r(a.payload);e.postMessage({params:a,result:p},"*")}})}const t={user:{getUserToken:({userId:e})=>"token:"+e}},P=e=>(u("data-v-6e7a6b64"),e=e(),h(),e),b={class:"home"},k=P(()=>o("h2",null,"Home",-1)),w=f({__name:"Index",setup(e){const s=l(null);return _(()=>{s.value&&s.value.contentWindow&&x(s.value.contentWindow)}),(a,n)=>(c(),d("div",b,[k,o("iframe",{ref_key:"iframeRef",ref:s,src:"/demos/promiseify-post-message/inner",frameborder:"0"},null,512)]))}}),I=g(w,[["__scopeId","data-v-6e7a6b64"]]),M=o("h1",{id:"promiseify-postmessage",tabindex:"-1"},[v("Promiseify PostMessage "),o("a",{class:"header-anchor",href:"#promiseify-postmessage","aria-label":'Permalink to "Promiseify PostMessage"'},"​")],-1),B=o("p",null,"将 postMessage 消息通信 Promise 化",-1),V=JSON.parse('{"title":"Promiseify PostMessage","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false},"headers":[],"relativePath":"demos/promiseify-post-message/index.md","filePath":"demos/promiseify-post-message/index.md","lastUpdated":1712579063000}'),N={name:"demos/promiseify-post-message/index.md"},$=Object.assign(N,{setup(e){return(s,a)=>(c(),d("div",null,[M,B,y(I)]))}});export{V as __pageData,$ as default};
import{d as f,h as l,l as _,o as c,c as d,m as o,q as u,s as h,_ as g,J as y,a as v}from"./chunks/framework.BFSS5Pox.js";function x(e){window.addEventListener("message",async s=>{var i;const a=s.data,n=a.namespace,m=a.action,r=(i=t==null?void 0:t[n])==null?void 0:i[m];if(r){const p=await r(a.payload);e.postMessage({params:a,result:p},"*")}})}const t={user:{getUserToken:({userId:e})=>"token:"+e}},P=e=>(u("data-v-6e7a6b64"),e=e(),h(),e),b={class:"home"},k=P(()=>o("h2",null,"Home",-1)),w=f({__name:"Index",setup(e){const s=l(null);return _(()=>{s.value&&s.value.contentWindow&&x(s.value.contentWindow)}),(a,n)=>(c(),d("div",b,[k,o("iframe",{ref_key:"iframeRef",ref:s,src:"/demos/promiseify-post-message/inner",frameborder:"0"},null,512)]))}}),I=g(w,[["__scopeId","data-v-6e7a6b64"]]),M=o("h1",{id:"promiseify-postmessage",tabindex:"-1"},[v("Promiseify PostMessage "),o("a",{class:"header-anchor",href:"#promiseify-postmessage","aria-label":'Permalink to "Promiseify PostMessage"'},"​")],-1),B=o("p",null,"将 postMessage 消息通信 Promise 化",-1),V=JSON.parse('{"title":"Promiseify PostMessage","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false},"headers":[],"relativePath":"demos/promiseify-post-message/index.md","filePath":"demos/promiseify-post-message/index.md","lastUpdated":1712666210000}'),N={name:"demos/promiseify-post-message/index.md"},$=Object.assign(N,{setup(e){return(s,a)=>(c(),d("div",null,[M,B,y(I)]))}});export{V as __pageData,$ as default};

2
assets/demos_promiseify-post-message_index.md.pKnP7cZ9.lean.js → assets/demos_promiseify-post-message_index.md.B37AW66D.lean.js
View File

@@ -1 +1 @@
import{d as f,h as l,l as _,o as c,c as d,m as o,q as u,s as h,_ as g,J as y,a as v}from"./chunks/framework.BFSS5Pox.js";function x(e){window.addEventListener("message",async s=>{var i;const a=s.data,n=a.namespace,m=a.action,r=(i=t==null?void 0:t[n])==null?void 0:i[m];if(r){const p=await r(a.payload);e.postMessage({params:a,result:p},"*")}})}const t={user:{getUserToken:({userId:e})=>"token:"+e}},P=e=>(u("data-v-6e7a6b64"),e=e(),h(),e),b={class:"home"},k=P(()=>o("h2",null,"Home",-1)),w=f({__name:"Index",setup(e){const s=l(null);return _(()=>{s.value&&s.value.contentWindow&&x(s.value.contentWindow)}),(a,n)=>(c(),d("div",b,[k,o("iframe",{ref_key:"iframeRef",ref:s,src:"/demos/promiseify-post-message/inner",frameborder:"0"},null,512)]))}}),I=g(w,[["__scopeId","data-v-6e7a6b64"]]),M=o("h1",{id:"promiseify-postmessage",tabindex:"-1"},[v("Promiseify PostMessage "),o("a",{class:"header-anchor",href:"#promiseify-postmessage","aria-label":'Permalink to "Promiseify PostMessage"'},"​")],-1),B=o("p",null,"将 postMessage 消息通信 Promise 化",-1),V=JSON.parse('{"title":"Promiseify PostMessage","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false},"headers":[],"relativePath":"demos/promiseify-post-message/index.md","filePath":"demos/promiseify-post-message/index.md","lastUpdated":1712579063000}'),N={name:"demos/promiseify-post-message/index.md"},$=Object.assign(N,{setup(e){return(s,a)=>(c(),d("div",null,[M,B,y(I)]))}});export{V as __pageData,$ as default};
import{d as f,h as l,l as _,o as c,c as d,m as o,q as u,s as h,_ as g,J as y,a as v}from"./chunks/framework.BFSS5Pox.js";function x(e){window.addEventListener("message",async s=>{var i;const a=s.data,n=a.namespace,m=a.action,r=(i=t==null?void 0:t[n])==null?void 0:i[m];if(r){const p=await r(a.payload);e.postMessage({params:a,result:p},"*")}})}const t={user:{getUserToken:({userId:e})=>"token:"+e}},P=e=>(u("data-v-6e7a6b64"),e=e(),h(),e),b={class:"home"},k=P(()=>o("h2",null,"Home",-1)),w=f({__name:"Index",setup(e){const s=l(null);return _(()=>{s.value&&s.value.contentWindow&&x(s.value.contentWindow)}),(a,n)=>(c(),d("div",b,[k,o("iframe",{ref_key:"iframeRef",ref:s,src:"/demos/promiseify-post-message/inner",frameborder:"0"},null,512)]))}}),I=g(w,[["__scopeId","data-v-6e7a6b64"]]),M=o("h1",{id:"promiseify-postmessage",tabindex:"-1"},[v("Promiseify PostMessage "),o("a",{class:"header-anchor",href:"#promiseify-postmessage","aria-label":'Permalink to "Promiseify PostMessage"'},"​")],-1),B=o("p",null,"将 postMessage 消息通信 Promise 化",-1),V=JSON.parse('{"title":"Promiseify PostMessage","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false},"headers":[],"relativePath":"demos/promiseify-post-message/index.md","filePath":"demos/promiseify-post-message/index.md","lastUpdated":1712666210000}'),N={name:"demos/promiseify-post-message/index.md"},$=Object.assign(N,{setup(e){return(s,a)=>(c(),d("div",null,[M,B,y(I)]))}});export{V as __pageData,$ as default};

2
assets/demos_promiseify-post-message_inner.md.BlWQUQlX.js → assets/demos_promiseify-post-message_inner.md.C1U-BqTn.js
View File

@@ -1 +1 @@
import{d,h as l,o as r,c,m as p,t as _,q as m,s as f,_ as u,J as g}from"./chunks/framework.BFSS5Pox.js";function k(){window.addEventListener("message",({data:e,type:a})=>{if(a==="message"){const{params:s,result:n}=e,t=`${s.namespace}.${s.action}_${s.id}`,o=i.get(t);o&&(o(n),i.delete(t))}})}const i=new Map;let v=0;function w(e){return new Promise(a=>{if(window.parent){const s=v++,n=`${e.namespace}.${String(e.action)}_${s}`;i.set(n,a),window.parent.postMessage({id:s,...e},"*")}})}const h=e=>(m("data-v-cafa80a5"),e=e(),f(),e),y={class:"inner"},$=h(()=>p("h2",null,"Inner",-1)),I=d({__name:"Inner",setup(e){k();const a=l("");async function s(n){const t=await w({namespace:"user",action:"getUserToken",payload:{userId:n}});t&&(a.value=t)}return(n,t)=>(r(),c("div",y,[$,p("button",{onClick:t[0]||(t[0]=o=>s("123456"))},"getUserToken: "+_(a.value),1)]))}}),S=u(I,[["__scopeId","data-v-cafa80a5"]]),x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false,"outline":false},"headers":[],"relativePath":"demos/promiseify-post-message/inner.md","filePath":"demos/promiseify-post-message/inner.md","lastUpdated":1712579063000}'),b={name:"demos/promiseify-post-message/inner.md"},C=Object.assign(b,{setup(e){return(a,s)=>(r(),c("div",null,[g(S)]))}});export{x as __pageData,C as default};
import{d,h as l,o as r,c,m as p,t as _,q as m,s as f,_ as u,J as g}from"./chunks/framework.BFSS5Pox.js";function k(){window.addEventListener("message",({data:e,type:a})=>{if(a==="message"){const{params:s,result:n}=e,t=`${s.namespace}.${s.action}_${s.id}`,o=i.get(t);o&&(o(n),i.delete(t))}})}const i=new Map;let v=0;function w(e){return new Promise(a=>{if(window.parent){const s=v++,n=`${e.namespace}.${String(e.action)}_${s}`;i.set(n,a),window.parent.postMessage({id:s,...e},"*")}})}const h=e=>(m("data-v-cafa80a5"),e=e(),f(),e),y={class:"inner"},$=h(()=>p("h2",null,"Inner",-1)),I=d({__name:"Inner",setup(e){k();const a=l("");async function s(n){const t=await w({namespace:"user",action:"getUserToken",payload:{userId:n}});t&&(a.value=t)}return(n,t)=>(r(),c("div",y,[$,p("button",{onClick:t[0]||(t[0]=o=>s("123456"))},"getUserToken: "+_(a.value),1)]))}}),S=u(I,[["__scopeId","data-v-cafa80a5"]]),x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false,"outline":false},"headers":[],"relativePath":"demos/promiseify-post-message/inner.md","filePath":"demos/promiseify-post-message/inner.md","lastUpdated":1712666210000}'),b={name:"demos/promiseify-post-message/inner.md"},C=Object.assign(b,{setup(e){return(a,s)=>(r(),c("div",null,[g(S)]))}});export{x as __pageData,C as default};

2
assets/demos_promiseify-post-message_inner.md.BlWQUQlX.lean.js → assets/demos_promiseify-post-message_inner.md.C1U-BqTn.lean.js
View File

@@ -1 +1 @@
import{d,h as l,o as r,c,m as p,t as _,q as m,s as f,_ as u,J as g}from"./chunks/framework.BFSS5Pox.js";function k(){window.addEventListener("message",({data:e,type:a})=>{if(a==="message"){const{params:s,result:n}=e,t=`${s.namespace}.${s.action}_${s.id}`,o=i.get(t);o&&(o(n),i.delete(t))}})}const i=new Map;let v=0;function w(e){return new Promise(a=>{if(window.parent){const s=v++,n=`${e.namespace}.${String(e.action)}_${s}`;i.set(n,a),window.parent.postMessage({id:s,...e},"*")}})}const h=e=>(m("data-v-cafa80a5"),e=e(),f(),e),y={class:"inner"},$=h(()=>p("h2",null,"Inner",-1)),I=d({__name:"Inner",setup(e){k();const a=l("");async function s(n){const t=await w({namespace:"user",action:"getUserToken",payload:{userId:n}});t&&(a.value=t)}return(n,t)=>(r(),c("div",y,[$,p("button",{onClick:t[0]||(t[0]=o=>s("123456"))},"getUserToken: "+_(a.value),1)]))}}),S=u(I,[["__scopeId","data-v-cafa80a5"]]),x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false,"outline":false},"headers":[],"relativePath":"demos/promiseify-post-message/inner.md","filePath":"demos/promiseify-post-message/inner.md","lastUpdated":1712579063000}'),b={name:"demos/promiseify-post-message/inner.md"},C=Object.assign(b,{setup(e){return(a,s)=>(r(),c("div",null,[g(S)]))}});export{x as __pageData,C as default};
import{d,h as l,o as r,c,m as p,t as _,q as m,s as f,_ as u,J as g}from"./chunks/framework.BFSS5Pox.js";function k(){window.addEventListener("message",({data:e,type:a})=>{if(a==="message"){const{params:s,result:n}=e,t=`${s.namespace}.${s.action}_${s.id}`,o=i.get(t);o&&(o(n),i.delete(t))}})}const i=new Map;let v=0;function w(e){return new Promise(a=>{if(window.parent){const s=v++,n=`${e.namespace}.${String(e.action)}_${s}`;i.set(n,a),window.parent.postMessage({id:s,...e},"*")}})}const h=e=>(m("data-v-cafa80a5"),e=e(),f(),e),y={class:"inner"},$=h(()=>p("h2",null,"Inner",-1)),I=d({__name:"Inner",setup(e){k();const a=l("");async function s(n){const t=await w({namespace:"user",action:"getUserToken",payload:{userId:n}});t&&(a.value=t)}return(n,t)=>(r(),c("div",y,[$,p("button",{onClick:t[0]||(t[0]=o=>s("123456"))},"getUserToken: "+_(a.value),1)]))}}),S=u(I,[["__scopeId","data-v-cafa80a5"]]),x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page","navbar":false,"sidebar":false,"aside":false,"footer":false,"outline":false},"headers":[],"relativePath":"demos/promiseify-post-message/inner.md","filePath":"demos/promiseify-post-message/inner.md","lastUpdated":1712666210000}'),b={name:"demos/promiseify-post-message/inner.md"},C=Object.assign(b,{setup(e){return(a,s)=>(r(),c("div",null,[g(S)]))}});export{x as __pageData,C as default};

2
assets/index.md.D15MJqtm.js → assets/index.md.CHgzlwn_.js
View File

@@ -1 +1 @@
import{_ as e,c as t,o as i}from"./chunks/framework.BFSS5Pox.js";const m=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":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1712579063000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return i(),t("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
import{_ as e,c as t,o as i}from"./chunks/framework.BFSS5Pox.js";const m=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":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1712666210000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return i(),t("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};

2
assets/index.md.D15MJqtm.lean.js → assets/index.md.CHgzlwn_.lean.js
View File

@@ -1 +1 @@
import{_ as e,c as t,o as i}from"./chunks/framework.BFSS5Pox.js";const m=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":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1712579063000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return i(),t("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
import{_ as e,c as t,o as i}from"./chunks/framework.BFSS5Pox.js";const m=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":"Clipboard Manager","details":"A Powerful clipboard management tool"},{"icon":"✍🏻","title":"Super Markdown","details":"Powerful Markdown editor"},{"icon":"🚗","title":"JS Runner","details":"Run JavaScript dynamicly in Browser/Node.js"},{"icon":"🔑","title":"Bytemd Plugin","details":"Bytemd Plugin Library"},{"icon":"🍬","title":"ASOUL Browser Pet","details":"Keep an A-SOUL member as a pet in your browser"},{"icon":"🔧","title":"Typein","details":"Typein text, quickly perform browser operations"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1712666210000}'),n={name:"index.md"};function a(r,o,l,s,d,c){return i(),t("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};

2
assets/note_CSS.md.iyOoSfOc.js → assets/note_CSS.md.62UnC_WS.js
View File

@@ -1,4 +1,4 @@
import{_ as l,c as a,m as s,a as e,ai as i,o as n}from"./chunks/framework.BFSS5Pox.js";const p="/assets/BFC-1.Bs9guDK8.jpg",t="/assets/BFC-2.exVcyt2Q.jpg",h="/assets/BFC-3.B5Ao7L7o.jpg",k="/assets/BFC-4.CuxslIO8.jpg",q=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1712579063000}'),d={name:"note/CSS.md"},r=i(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to &quot;CSS基础&quot;">​</a></h1><h2 id="书写css代码的方式" tabindex="-1">书写CSS代码的方式 <a class="header-anchor" href="#书写css代码的方式" aria-label="Permalink to &quot;书写CSS代码的方式&quot;">​</a></h2><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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as l,c as a,m as s,a as e,ai as i,o as n}from"./chunks/framework.BFSS5Pox.js";const p="/assets/BFC-1.Bs9guDK8.jpg",t="/assets/BFC-2.exVcyt2Q.jpg",h="/assets/BFC-3.B5Ao7L7o.jpg",k="/assets/BFC-4.CuxslIO8.jpg",q=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1712666210000}'),d={name:"note/CSS.md"},r=i(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to &quot;CSS基础&quot;">​</a></h1><h2 id="书写css代码的方式" tabindex="-1">书写CSS代码的方式 <a class="header-anchor" href="#书写css代码的方式" aria-label="Permalink to &quot;书写CSS代码的方式&quot;">​</a></h2><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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>

2
assets/note_CSS.md.iyOoSfOc.lean.js → assets/note_CSS.md.62UnC_WS.lean.js
View File

@@ -1 +1 @@
import{_ as l,c as a,m as s,a as e,ai as i,o as n}from"./chunks/framework.BFSS5Pox.js";const p="/assets/BFC-1.Bs9guDK8.jpg",t="/assets/BFC-2.exVcyt2Q.jpg",h="/assets/BFC-3.B5Ao7L7o.jpg",k="/assets/BFC-4.CuxslIO8.jpg",q=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1712579063000}'),d={name:"note/CSS.md"},r=i("",210),o={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},c={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.186ex"},xmlns:"http://www.w3.org/2000/svg",width:"6.267ex",height:"2.071ex",role:"img",focusable:"false",viewBox:"0 -833.2 2770.1 915.2","aria-hidden":"true"},E=i("",1),g=[E],u=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("msup",null,[s("mn",null,"2"),s("mn",null,"3")]),s("mo",null,"="),s("mn",null,"8")])],-1),y=i("",325);function b(m,F,C,v,B,x){return n(),a("div",null,[r,s("p",null,[e("这样最终的样式就成为了："),s("mjx-container",o,[(n(),a("svg",c,g)),u])]),y])}const A=l(d,[["render",b]]);export{q as __pageData,A as default};
import{_ as l,c as a,m as s,a as e,ai as i,o as n}from"./chunks/framework.BFSS5Pox.js";const p="/assets/BFC-1.Bs9guDK8.jpg",t="/assets/BFC-2.exVcyt2Q.jpg",h="/assets/BFC-3.B5Ao7L7o.jpg",k="/assets/BFC-4.CuxslIO8.jpg",q=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","filePath":"note/CSS.md","lastUpdated":1712666210000}'),d={name:"note/CSS.md"},r=i("",210),o={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},c={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.186ex"},xmlns:"http://www.w3.org/2000/svg",width:"6.267ex",height:"2.071ex",role:"img",focusable:"false",viewBox:"0 -833.2 2770.1 915.2","aria-hidden":"true"},E=i("",1),g=[E],u=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("msup",null,[s("mn",null,"2"),s("mn",null,"3")]),s("mo",null,"="),s("mn",null,"8")])],-1),y=i("",325);function b(m,F,C,v,B,x){return n(),a("div",null,[r,s("p",null,[e("这样最终的样式就成为了："),s("mjx-container",o,[(n(),a("svg",c,g)),u])]),y])}const A=l(d,[["render",b]]);export{q as __pageData,A as default};

18
assets/note_Front-end Engineering.md.BjlRXsiG.js → assets/note_Front-end Engineering.md.B8WYCkEY.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_Front-end Engineering.md.BjlRXsiG.lean.js → assets/note_Front-end Engineering.md.B8WYCkEY.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const e="/assets/the-node.js-system.gCyqLCsp.jpeg",l="/assets/esmodule-phases.BezvbeaV.png",p="/assets/hard-link-and-soft-link.InHxy2mg.jpg",t="/assets/how-pnpm-works.dAKs5qkE.jpg",y=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1712579063000}'),h={name:"note/Front-end Engineering.md"},d=n("",254),k=[d];function o(r,c,E,g,u,b){return a(),i("div",null,k)}const F=s(h,[["render",o]]);export{y as __pageData,F as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const e="/assets/the-node.js-system.gCyqLCsp.jpeg",l="/assets/esmodule-phases.BezvbeaV.png",p="/assets/hard-link-and-soft-link.InHxy2mg.jpg",t="/assets/how-pnpm-works.dAKs5qkE.jpg",y=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","filePath":"note/Front-end Engineering.md","lastUpdated":1712666210000}'),h={name:"note/Front-end Engineering.md"},d=n("",254),k=[d];function o(r,c,E,g,u,b){return a(),i("div",null,k)}const F=s(h,[["render",o]]);export{y as __pageData,F as default};

2
assets/note_JavaScript.md.DIr9_Egu.js → assets/note_JavaScript.md.Cyxs785t.js
View File

@@ -1 +1 @@
import{_ as t,c as e,o as r,m as a,a as c}from"./chunks/framework.BFSS5Pox.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1712579063000}'),i={name:"note/JavaScript.md"},s=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=[s,n,o];function p(d,_,h,v,m,u){return r(),e("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
import{_ as t,c as e,o as r,m as a,a as c}from"./chunks/framework.BFSS5Pox.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1712666210000}'),i={name:"note/JavaScript.md"},s=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=[s,n,o];function p(d,_,h,v,m,u){return r(),e("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};

2
assets/note_JavaScript.md.DIr9_Egu.lean.js → assets/note_JavaScript.md.Cyxs785t.lean.js
View File

@@ -1 +1 @@
import{_ as t,c as e,o as r,m as a,a as c}from"./chunks/framework.BFSS5Pox.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1712579063000}'),i={name:"note/JavaScript.md"},s=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=[s,n,o];function p(d,_,h,v,m,u){return r(),e("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};
import{_ as t,c as e,o as r,m as a,a as c}from"./chunks/framework.BFSS5Pox.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","filePath":"note/JavaScript.md","lastUpdated":1712666210000}'),i={name:"note/JavaScript.md"},s=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=[s,n,o];function p(d,_,h,v,m,u){return r(),e("div",null,l)}const J=t(i,[["render",p]]);export{S as __pageData,J as default};

2
assets/note_JavaScriptEnhanced.md.0S45ZOWV.js → assets/note_JavaScriptEnhanced.md.B_u_rcKX.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/image-20221118222207332-16687813334481.voHhuUQb.png",p="/assets/image-20221118222311200-16687813941873.BNUI2Qna.png",h="/assets/image-20221122103111654.-tsvcGvv.png",e="/assets/image-20221122103256116.BasjQ_pg.png",k="/assets/image-20221122103715428.DMMNV3OF.png",t="/assets/image-20221125090752249.BnpI9zXc.png",r="/assets/image-20221125094148365.ZryUkl5L.png",B=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1712579063000}'),E={name:"note/JavaScriptEnhanced.md"},d=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义一个函数</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/image-20221118222207332-16687813334481.voHhuUQb.png",p="/assets/image-20221118222311200-16687813941873.BNUI2Qna.png",h="/assets/image-20221122103111654.-tsvcGvv.png",e="/assets/image-20221122103256116.BasjQ_pg.png",k="/assets/image-20221122103715428.DMMNV3OF.png",t="/assets/image-20221125090752249.BnpI9zXc.png",r="/assets/image-20221125094148365.ZryUkl5L.png",B=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1712666210000}'),E={name:"note/JavaScriptEnhanced.md"},d=n(`<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 vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义一个函数</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>

2
assets/note_JavaScriptEnhanced.md.0S45ZOWV.lean.js → assets/note_JavaScriptEnhanced.md.B_u_rcKX.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/image-20221118222207332-16687813334481.voHhuUQb.png",p="/assets/image-20221118222311200-16687813941873.BNUI2Qna.png",h="/assets/image-20221122103111654.-tsvcGvv.png",e="/assets/image-20221122103256116.BasjQ_pg.png",k="/assets/image-20221122103715428.DMMNV3OF.png",t="/assets/image-20221125090752249.BnpI9zXc.png",r="/assets/image-20221125094148365.ZryUkl5L.png",B=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1712579063000}'),E={name:"note/JavaScriptEnhanced.md"},d=n("",668),g=[d];function c(y,o,F,b,u,m){return a(),i("div",null,g)}const A=s(E,[["render",c]]);export{B as __pageData,A as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/image-20221118222207332-16687813334481.voHhuUQb.png",p="/assets/image-20221118222311200-16687813941873.BNUI2Qna.png",h="/assets/image-20221122103111654.-tsvcGvv.png",e="/assets/image-20221122103256116.BasjQ_pg.png",k="/assets/image-20221122103715428.DMMNV3OF.png",t="/assets/image-20221125090752249.BnpI9zXc.png",r="/assets/image-20221125094148365.ZryUkl5L.png",B=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","filePath":"note/JavaScriptEnhanced.md","lastUpdated":1712666210000}'),E={name:"note/JavaScriptEnhanced.md"},d=n("",668),g=[d];function c(y,o,F,b,u,m){return a(),i("div",null,g)}const A=s(E,[["render",c]]);export{B as __pageData,A as default};

2
assets/note_MySQL.md.C8i2siN1.js → assets/note_MySQL.md.CCJ8S7fj.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_MySQL.md.C8i2siN1.lean.js → assets/note_MySQL.md.CCJ8S7fj.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as t}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"MySQL","description":"","frontmatter":{},"headers":[],"relativePath":"note/MySQL.md","filePath":"note/MySQL.md","lastUpdated":1712579063000}'),l={name:"note/MySQL.md"},n=t("",71),e=[n];function h(p,k,d,r,g,E){return a(),i("div",null,e)}const o=s(l,[["render",h]]);export{c as __pageData,o as default};
import{_ as s,c as i,o as a,ai as t}from"./chunks/framework.BFSS5Pox.js";const c=JSON.parse('{"title":"MySQL","description":"","frontmatter":{},"headers":[],"relativePath":"note/MySQL.md","filePath":"note/MySQL.md","lastUpdated":1712666210000}'),l={name:"note/MySQL.md"},n=t("",71),e=[n];function h(p,k,d,r,g,E){return a(),i("div",null,e)}const o=s(l,[["render",h]]);export{c as __pageData,o as default};

16
assets/note_React Hooks.md.Cj6vANWG.js → assets/note_React Hooks.md.B66g8BWW.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/useLayoutEffect.B_End6k1.svg",p="/assets/SSR.Ja5pYx3h.svg",F=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1712579063000}'),h={name:"note/React Hooks.md"},k=n(`<h1 id="react-hooks" tabindex="-1">React Hooks <a class="header-anchor" href="#react-hooks" aria-label="Permalink to &quot;React Hooks&quot;">​</a></h1><ul><li>认识和体验Hooks</li><li>State/Effect</li><li>Context/Reducer</li><li>Callback/Memo</li><li>Ref/LayoutEffect</li><li>自定义Hooks使用</li></ul><h2 id="认识react-hooks" tabindex="-1">认识React Hooks <a class="header-anchor" href="#认识react-hooks" aria-label="Permalink to &quot;认识React Hooks&quot;">​</a></h2><p>Hooks 是 React16.8 推出的新特性</p><p>在没有Hooks时，类组件能够完成的大部分工作，函数式组件都无法胜任：</p><ul><li>类组件可以定义并保存组件内部状态，并在状态发生改变时触发视图重新渲染 <ul><li>函数式组件不行，每次调用函数其中的变量都会被重新初始化，重新渲染时整个函数都重新执行</li></ul></li><li>类组件可以在其内部的生命周期回调中添加副作用 <ul><li>例如<code>componentDidMount</code>在类组件生命周期只会执行一次</li><li>函数式组件没有生命周期，如果在函数体内发起网络请求，那每次重新渲染都会发起请求</li></ul></li></ul><p>类组件存在的问题：</p><ul><li>复杂组件变得难以理解 <ul><li>业务代码相互耦合，类组件变得复杂</li><li>逻辑强耦合在一起难以拆分，强行拆分会导致过度设计，进一步增加代码复杂度</li></ul></li><li>class关键字的理解 <ul><li>初学React时class关键字理解存在困难</li><li>处理<code>this</code>的指向问题需要花费额外的心智负担</li></ul></li><li>组件状态复用 <ul><li>要复用组件需要借助高阶组件</li><li><code>redux</code> 中的 <code>connect</code> 或者 <code>react-router</code> 中的 <code>withRouter</code>，高阶组件的目的就是为了状态复</li><li>或通过Provider、Consumer来共享状态，但是Comsumer嵌套问题较严重</li></ul></li></ul><p>Hooks带来的优势：</p><ul><li>在不编写class的情况下使用state和其他React特性（如生命周期）</li><li>Hooks 允许我们在函数式组件中使用状态，并在状态发生改变时让视图重新渲染</li><li>同时，我们还可以在函数式组件中使用生命周期回调</li><li>更多的优点 ...</li></ul><h2 id="计数器案例对比" tabindex="-1">计数器案例对比 <a class="header-anchor" href="#计数器案例对比" aria-label="Permalink to &quot;计数器案例对比&quot;">​</a></h2><p>分别使用Hooks和类组件编写一个计数器：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group--SX4L" id="tab-O18OIEN" checked="checked"><label for="tab-O18OIEN">CounterClass.jsx</label><input type="radio" name="group--SX4L" id="tab-jVtooGM"><label for="tab-jVtooGM">CounterFunctional.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// CounterClass.jsx</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/useLayoutEffect.B_End6k1.svg",p="/assets/SSR.Ja5pYx3h.svg",F=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1712666210000}'),h={name:"note/React Hooks.md"},k=n(`<h1 id="react-hooks" tabindex="-1">React Hooks <a class="header-anchor" href="#react-hooks" aria-label="Permalink to &quot;React Hooks&quot;">​</a></h1><ul><li>认识和体验Hooks</li><li>State/Effect</li><li>Context/Reducer</li><li>Callback/Memo</li><li>Ref/LayoutEffect</li><li>自定义Hooks使用</li></ul><h2 id="认识react-hooks" tabindex="-1">认识React Hooks <a class="header-anchor" href="#认识react-hooks" aria-label="Permalink to &quot;认识React Hooks&quot;">​</a></h2><p>Hooks 是 React16.8 推出的新特性</p><p>在没有Hooks时，类组件能够完成的大部分工作，函数式组件都无法胜任：</p><ul><li>类组件可以定义并保存组件内部状态，并在状态发生改变时触发视图重新渲染 <ul><li>函数式组件不行，每次调用函数其中的变量都会被重新初始化，重新渲染时整个函数都重新执行</li></ul></li><li>类组件可以在其内部的生命周期回调中添加副作用 <ul><li>例如<code>componentDidMount</code>在类组件生命周期只会执行一次</li><li>函数式组件没有生命周期，如果在函数体内发起网络请求，那每次重新渲染都会发起请求</li></ul></li></ul><p>类组件存在的问题：</p><ul><li>复杂组件变得难以理解 <ul><li>业务代码相互耦合，类组件变得复杂</li><li>逻辑强耦合在一起难以拆分，强行拆分会导致过度设计，进一步增加代码复杂度</li></ul></li><li>class关键字的理解 <ul><li>初学React时class关键字理解存在困难</li><li>处理<code>this</code>的指向问题需要花费额外的心智负担</li></ul></li><li>组件状态复用 <ul><li>要复用组件需要借助高阶组件</li><li><code>redux</code> 中的 <code>connect</code> 或者 <code>react-router</code> 中的 <code>withRouter</code>，高阶组件的目的就是为了状态复</li><li>或通过Provider、Consumer来共享状态，但是Comsumer嵌套问题较严重</li></ul></li></ul><p>Hooks带来的优势：</p><ul><li>在不编写class的情况下使用state和其他React特性（如生命周期）</li><li>Hooks 允许我们在函数式组件中使用状态，并在状态发生改变时让视图重新渲染</li><li>同时，我们还可以在函数式组件中使用生命周期回调</li><li>更多的优点 ...</li></ul><h2 id="计数器案例对比" tabindex="-1">计数器案例对比 <a class="header-anchor" href="#计数器案例对比" aria-label="Permalink to &quot;计数器案例对比&quot;">​</a></h2><p>分别使用Hooks和类组件编写一个计数器：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-F6Oml" id="tab-WKHDdF7" checked="checked"><label for="tab-WKHDdF7">CounterClass.jsx</label><input type="radio" name="group-F6Oml" id="tab-T2GTCIk"><label for="tab-T2GTCIk">CounterFunctional.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// CounterClass.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { PureComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterClass</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> PureComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -95,7 +95,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Effect Cleaned Up&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</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></div></div><h2 id="usecontext" tabindex="-1">useContext <a class="header-anchor" href="#usecontext" aria-label="Permalink to &quot;useContext&quot;">​</a></h2><p>在之前的开发中，要在组件中使用共享的Context有两种方式</p><ul><li>类组件可以通过<code>ClassName.contextType = SomeContext</code>绑定上下文</li><li>在类的函数中通过<code>this.context.xxx</code>获取上下文中共享的状态</li><li>同时有多个Context时/函数式组件中，通过<code>SomeContext.Consumer</code>的方式共享上下文状态</li></ul><p>其中最大的问题就是：多个Context在同时使用时会引入大量的嵌套，而<code>useContext</code>可以帮我们解决这个问题</p><p>通过<code>useContext</code>可以直接获取到某个上下文中共享的状态变量</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-g6ij0" id="tab-A0NAjwy" checked="checked"><label for="tab-A0NAjwy">Profile.jsx</label><input type="radio" name="group-g6ij0" id="tab-ylf-jqM"><label for="tab-ylf-jqM">index.js</label><input type="radio" name="group-g6ij0" id="tab-bOF2Etj"><label for="tab-bOF2Etj">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Profile.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</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></div></div><h2 id="usecontext" tabindex="-1">useContext <a class="header-anchor" href="#usecontext" aria-label="Permalink to &quot;useContext&quot;">​</a></h2><p>在之前的开发中，要在组件中使用共享的Context有两种方式</p><ul><li>类组件可以通过<code>ClassName.contextType = SomeContext</code>绑定上下文</li><li>在类的函数中通过<code>this.context.xxx</code>获取上下文中共享的状态</li><li>同时有多个Context时/函数式组件中，通过<code>SomeContext.Consumer</code>的方式共享上下文状态</li></ul><p>其中最大的问题就是：多个Context在同时使用时会引入大量的嵌套，而<code>useContext</code>可以帮我们解决这个问题</p><p>通过<code>useContext</code>可以直接获取到某个上下文中共享的状态变量</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-3licu" id="tab-tDghEtg" checked="checked"><label for="tab-tDghEtg">Profile.jsx</label><input type="radio" name="group-3licu" id="tab-xepViwW"><label for="tab-xepViwW">index.js</label><input type="radio" name="group-3licu" id="tab-g26tqXm"><label for="tab-g26tqXm">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Profile.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useContext } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserContext, ThemeContext } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../context&#39;</span></span>
<span class="line"></span>
@@ -135,7 +135,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UserContext.Provider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><p>当组件上层最近的<code>SomeContext.Provider</code>提供的值发生更新时，<code>useContext</code>会使用上下文中最新的数据触发组件的重新渲染</p><h2 id="usereducer" tabindex="-1">useReducer <a class="header-anchor" href="#usereducer" aria-label="Permalink to &quot;useReducer&quot;">​</a></h2><p><code>useReducer</code>并不是Redux的替代品</p><ul><li><code>useReducer</code>是<code>useState</code>在某些场景下的替代方案</li><li>如果state需要处理的<strong>数据较为复杂</strong>，我们可以通过<code>useReducer</code>对其进行拆分</li><li>或者需要修改的state需要依赖之前的state时，也可以使用<code>useReducer</code></li></ul><p>下面举一个例子：用户信息包含多个复杂的字段，当用户执行操作后需要同时对多个字段进行修改</p><p>我们分别用<code>useState</code>和<code>useReducer</code>来实现：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-pefHW" id="tab-tbiX0q_" checked="checked"><label for="tab-tbiX0q_">UserInfoWithReducer.jsx</label><input type="radio" name="group-pefHW" id="tab-d1V_V4x"><label for="tab-d1V_V4x">UserInfo.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// UserInfoWithReducer.jsx</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><p>当组件上层最近的<code>SomeContext.Provider</code>提供的值发生更新时，<code>useContext</code>会使用上下文中最新的数据触发组件的重新渲染</p><h2 id="usereducer" tabindex="-1">useReducer <a class="header-anchor" href="#usereducer" aria-label="Permalink to &quot;useReducer&quot;">​</a></h2><p><code>useReducer</code>并不是Redux的替代品</p><ul><li><code>useReducer</code>是<code>useState</code>在某些场景下的替代方案</li><li>如果state需要处理的<strong>数据较为复杂</strong>，我们可以通过<code>useReducer</code>对其进行拆分</li><li>或者需要修改的state需要依赖之前的state时，也可以使用<code>useReducer</code></li></ul><p>下面举一个例子：用户信息包含多个复杂的字段，当用户执行操作后需要同时对多个字段进行修改</p><p>我们分别用<code>useState</code>和<code>useReducer</code>来实现：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-cc_U0" id="tab-3FmNUl6" checked="checked"><label for="tab-3FmNUl6">UserInfoWithReducer.jsx</label><input type="radio" name="group-cc_U0" id="tab-6qEHuWq"><label for="tab-6qEHuWq">UserInfo.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// UserInfoWithReducer.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useReducer } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reducer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">action</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
@@ -278,7 +278,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bar1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bar1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bar1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1</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></div></div><p>不论调用了多少次<code>bar1</code>，其内部取到的值都始终是最初的那个<code>count</code>，自然值也不会发生变化</p><p>所以，我们需要显式地为<code>useCallback</code>指定依赖state，这样才能准确地使用最新的状态定义新的函数</p><h3 id="真实的usecallback使用场景" tabindex="-1">真实的useCallback使用场景 <a class="header-anchor" href="#真实的usecallback使用场景" aria-label="Permalink to &quot;真实的useCallback使用场景&quot;">​</a></h3><p>经过之前的说明，目前<code>useCallback</code>看起来并没有实际的用途，它没有减少函数的定义次数，甚至在不合理使用时还会出现闭包陷阱，而带来的唯一好处就是：<strong>当状态没有发生改变时，保证函数指向确定且唯一</strong></p><p>下面我们举一个实际场景来说明<code>useCallback</code>的用途：</p><p>一个嵌套计数器的例子，外部计数器可以展示/改变计数器的值，子组件也可以通过调用props传递来的函数来改变计数器的值，同时外部计数器还包含了其他的状态在动态被修改</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-QWxWB" id="tab-O017QHW" checked="checked"><label for="tab-O017QHW">InnerCounter.jsx</label><input type="radio" name="group-QWxWB" id="tab-1msZbzM"><label for="tab-1msZbzM">Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// InnerCounter.jsx</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bar1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1</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></div></div><p>不论调用了多少次<code>bar1</code>，其内部取到的值都始终是最初的那个<code>count</code>，自然值也不会发生变化</p><p>所以，我们需要显式地为<code>useCallback</code>指定依赖state，这样才能准确地使用最新的状态定义新的函数</p><h3 id="真实的usecallback使用场景" tabindex="-1">真实的useCallback使用场景 <a class="header-anchor" href="#真实的usecallback使用场景" aria-label="Permalink to &quot;真实的useCallback使用场景&quot;">​</a></h3><p>经过之前的说明，目前<code>useCallback</code>看起来并没有实际的用途，它没有减少函数的定义次数，甚至在不合理使用时还会出现闭包陷阱，而带来的唯一好处就是：<strong>当状态没有发生改变时，保证函数指向确定且唯一</strong></p><p>下面我们举一个实际场景来说明<code>useCallback</code>的用途：</p><p>一个嵌套计数器的例子，外部计数器可以展示/改变计数器的值，子组件也可以通过调用props传递来的函数来改变计数器的值，同时外部计数器还包含了其他的状态在动态被修改</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-HPq_O" id="tab-GD7Vti3" checked="checked"><label for="tab-GD7Vti3">InnerCounter.jsx</label><input type="radio" name="group-HPq_O" id="tab-u-ykC5j"><label for="tab-u-ykC5j">Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// InnerCounter.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { memo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> memo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> InnerCounter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
@@ -526,7 +526,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useContext</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ThemeContext)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(user.name, theme.primaryColor) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</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></div></div><p>我们可以使用自定义Hook来简化这一操作，将所有的Context统一导入并转化为对象，直接在组件中使用</p><p>对之前的Profile组件使用Hook进行增强：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-HRqos" id="tab-u0DF2Ol" checked="checked"><label for="tab-u0DF2Ol">useSharedContext.js</label><input type="radio" name="group-HRqos" id="tab-TZPZdOD"><label for="tab-TZPZdOD">Profile.js</label></div><div class="blocks"><div class="language-ts vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useSharedContext.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</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></div></div><p>我们可以使用自定义Hook来简化这一操作，将所有的Context统一导入并转化为对象，直接在组件中使用</p><p>对之前的Profile组件使用Hook进行增强：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-FFAhq" id="tab-ZMUyyTh" checked="checked"><label for="tab-ZMUyyTh">useSharedContext.js</label><input type="radio" name="group-FFAhq" id="tab-qStI_PZ"><label for="tab-qStI_PZ">Profile.js</label></div><div class="blocks"><div class="language-ts vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useSharedContext.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useContext } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UserContext, ThemeContext } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../context&#39;</span></span>
<span class="line"></span>
@@ -550,7 +550,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">theme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">context</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}&lt;/</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><h3 id="案例二-获取滚动位置" tabindex="-1">案例二：获取滚动位置 <a class="header-anchor" href="#案例二-获取滚动位置" aria-label="Permalink to &quot;案例二：获取滚动位置&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-hNM24" id="tab-d3PbrU0" checked="checked"><label for="tab-d3PbrU0">useScrollPosition.js</label><input type="radio" name="group-hNM24" id="tab-C3irHXY"><label for="tab-C3irHXY">GiantList.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useScrollPosition.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><h3 id="案例二-获取滚动位置" tabindex="-1">案例二：获取滚动位置 <a class="header-anchor" href="#案例二-获取滚动位置" aria-label="Permalink to &quot;案例二：获取滚动位置&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-394vf" id="tab-PVWZUxU" checked="checked"><label for="tab-PVWZUxU">useScrollPosition.js</label><input type="radio" name="group-394vf" id="tab-8e54_Tb"><label for="tab-8e54_Tb">GiantList.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useScrollPosition.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useState, useEffect } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useScrollPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}) {</span></span>
@@ -587,7 +587,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> GiantList</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></div></div></div></div><h3 id="案例三-封装localstorage" tabindex="-1">案例三：封装localStorage <a class="header-anchor" href="#案例三-封装localstorage" aria-label="Permalink to &quot;案例三：封装localStorage&quot;">​</a></h3><p>在使用状态变量的时候，为状态变量值的更新添加副作用，将变量名作为key，值更新到localStorage中</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-YOMaM" id="tab-rLLgH_t" checked="checked"><label for="tab-rLLgH_t">useLocalStorage.js</label><input type="radio" name="group-YOMaM" id="tab-EL3D8yl"><label for="tab-EL3D8yl">UserInfoStorage.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useLocalStorage.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> GiantList</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></div></div></div></div><h3 id="案例三-封装localstorage" tabindex="-1">案例三：封装localStorage <a class="header-anchor" href="#案例三-封装localstorage" aria-label="Permalink to &quot;案例三：封装localStorage&quot;">​</a></h3><p>在使用状态变量的时候，为状态变量值的更新添加副作用，将变量名作为key，值更新到localStorage中</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-YjURA" id="tab-VSd2z5b" checked="checked"><label for="tab-VSd2z5b">useLocalStorage.js</label><input type="radio" name="group-YjURA" id="tab-tmKx5E-"><label for="tab-tmKx5E-">UserInfoStorage.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// useLocalStorage.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useState, useEffect } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useLocalStorage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
@@ -622,7 +622,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> UserInfoStorage</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></div></div></div></div><p>这里的<code>useState</code>还展示了一个额外的用法，向<code>useState</code>传递一个函数，函数的返回值会作为状态变量的初始值</p><h2 id="redux-hooks" tabindex="-1">Redux Hooks <a class="header-anchor" href="#redux-hooks" aria-label="Permalink to &quot;Redux Hooks&quot;">​</a></h2><p>之前的Redux开发中，为了让组件和Redux建立联系，我们使用了react-redux中的connect</p><ul><li>必须与高阶函数结合，必须使用返回的高阶组件</li><li>必须编写<code>mapStateToProps</code> <code>mapDispatchToProps</code>，将上下文状态映射到props中</li></ul><p>从Redux7.1开始，支持Hook写法，不再需要编写connect以及映射函数了</p><h3 id="useselector" tabindex="-1">useSelector <a class="header-anchor" href="#useselector" aria-label="Permalink to &quot;useSelector&quot;">​</a></h3><p>将state映射到组件中</p><ul><li>参数一：将state映射到需要的数据中</li><li>参数二：可以进行比较，来决定组件是否重新渲染</li></ul><p>默认情况下<code>useSelector</code>监听整个state的变化，只要state中有状态变量发生变化，无论当前组件是否使用到了这个状态变量，都会触发组件的重新渲染。这就需要我们显式地为其指定重新渲染的判断条件</p><blockquote><p><code>useSelector</code>会比较我们返回的两个对象是否相等：</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> refEquality</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>只有两个对象全等时，才可以不触发重新渲染</p></blockquote><h3 id="usedispatch" tabindex="-1">useDispatch <a class="header-anchor" href="#usedispatch" aria-label="Permalink to &quot;useDispatch&quot;">​</a></h3><p>直接获取<code>dispatch</code>函数，之后在组件中直接调用即可</p><p>另外，我们还可以通过<code>useStore</code>来获取当前的store对象</p><p>拿之前Redux的计数器举例，使用<code>useSelector</code>与<code>useDispatch</code>进行重构：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-sQ5FS" id="tab-Nx_U7S6" checked="checked"><label for="tab-Nx_U7S6">[Now] Counter.jsx</label><input type="radio" name="group-sQ5FS" id="tab-Nx5DQd9"><label for="tab-Nx5DQd9">[Prev] Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// [Now] Counter.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> UserInfoStorage</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></div></div></div></div><p>这里的<code>useState</code>还展示了一个额外的用法，向<code>useState</code>传递一个函数，函数的返回值会作为状态变量的初始值</p><h2 id="redux-hooks" tabindex="-1">Redux Hooks <a class="header-anchor" href="#redux-hooks" aria-label="Permalink to &quot;Redux Hooks&quot;">​</a></h2><p>之前的Redux开发中，为了让组件和Redux建立联系，我们使用了react-redux中的connect</p><ul><li>必须与高阶函数结合，必须使用返回的高阶组件</li><li>必须编写<code>mapStateToProps</code> <code>mapDispatchToProps</code>，将上下文状态映射到props中</li></ul><p>从Redux7.1开始，支持Hook写法，不再需要编写connect以及映射函数了</p><h3 id="useselector" tabindex="-1">useSelector <a class="header-anchor" href="#useselector" aria-label="Permalink to &quot;useSelector&quot;">​</a></h3><p>将state映射到组件中</p><ul><li>参数一：将state映射到需要的数据中</li><li>参数二：可以进行比较，来决定组件是否重新渲染</li></ul><p>默认情况下<code>useSelector</code>监听整个state的变化，只要state中有状态变量发生变化，无论当前组件是否使用到了这个状态变量，都会触发组件的重新渲染。这就需要我们显式地为其指定重新渲染的判断条件</p><blockquote><p><code>useSelector</code>会比较我们返回的两个对象是否相等：</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> refEquality</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>只有两个对象全等时，才可以不触发重新渲染</p></blockquote><h3 id="usedispatch" tabindex="-1">useDispatch <a class="header-anchor" href="#usedispatch" aria-label="Permalink to &quot;useDispatch&quot;">​</a></h3><p>直接获取<code>dispatch</code>函数，之后在组件中直接调用即可</p><p>另外，我们还可以通过<code>useStore</code>来获取当前的store对象</p><p>拿之前Redux的计数器举例，使用<code>useSelector</code>与<code>useDispatch</code>进行重构：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-J3mbT" id="tab-52OkxjF" checked="checked"><label for="tab-52OkxjF">[Now] Counter.jsx</label><input type="radio" name="group-J3mbT" id="tab-jIhq_nk"><label for="tab-jIhq_nk">[Prev] Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// [Now] Counter.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { memo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useSelector, useDispatch, shallowEqual } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-redux&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { addCount, subCount } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../store/features/counter&#39;</span></span>

2
assets/note_React Hooks.md.Cj6vANWG.lean.js → assets/note_React Hooks.md.B66g8BWW.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/useLayoutEffect.B_End6k1.svg",p="/assets/SSR.Ja5pYx3h.svg",F=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1712579063000}'),h={name:"note/React Hooks.md"},k=n("",207),t=[k];function e(r,E,d,g,y,c){return a(),i("div",null,t)}const b=s(h,[["render",e]]);export{F as __pageData,b as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/useLayoutEffect.B_End6k1.svg",p="/assets/SSR.Ja5pYx3h.svg",F=JSON.parse('{"title":"React Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Hooks.md","filePath":"note/React Hooks.md","lastUpdated":1712666210000}'),h={name:"note/React Hooks.md"},k=n("",207),t=[k];function e(r,E,d,g,y,c){return a(),i("div",null,t)}const b=s(h,[["render",e]]);export{F as __pageData,b as default};

10
assets/note_React Router.md.DAdaHrZL.js → assets/note_React Router.md.BV8kv6_l.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"React Router","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Router.md","filePath":"note/React Router.md","lastUpdated":1712579063000}'),l={name:"note/React Router.md"},p=n(`<h1 id="react-router" tabindex="-1">React Router <a class="header-anchor" href="#react-router" aria-label="Permalink to &quot;React Router&quot;">​</a></h1><h2 id="了解reactrouter" tabindex="-1">了解ReactRouter <a class="header-anchor" href="#了解reactrouter" aria-label="Permalink to &quot;了解ReactRouter&quot;">​</a></h2><p>三大框架都有各自的路由实现</p><ul><li>Angular ngRouter</li><li>React ReactRouter</li><li>Vue VueRouter</li></ul><p>React Router在最近两年的版本更新较快，并且在最新的React Router6发生了较大的变化</p><ul><li>Web开发只需要安装<code>react-router-dom</code></li><li><code>react-router</code>包含一些ReactNative的内容</li></ul><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-router-dom</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>从<code>react-router-dom</code>中导出<code>BrowserRouter</code> 或 <code>HashRouter</code>，二者分别对应history模式与哈希模式</p><p>将App用二者之一包裹，即可启用路由：</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// index.js</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"React Router","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Router.md","filePath":"note/React Router.md","lastUpdated":1712666210000}'),l={name:"note/React Router.md"},p=n(`<h1 id="react-router" tabindex="-1">React Router <a class="header-anchor" href="#react-router" aria-label="Permalink to &quot;React Router&quot;">​</a></h1><h2 id="了解reactrouter" tabindex="-1">了解ReactRouter <a class="header-anchor" href="#了解reactrouter" aria-label="Permalink to &quot;了解ReactRouter&quot;">​</a></h2><p>三大框架都有各自的路由实现</p><ul><li>Angular ngRouter</li><li>React ReactRouter</li><li>Vue VueRouter</li></ul><p>React Router在最近两年的版本更新较快，并且在最新的React Router6发生了较大的变化</p><ul><li>Web开发只需要安装<code>react-router-dom</code></li><li><code>react-router</code>包含一些ReactNative的内容</li></ul><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-router-dom</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>从<code>react-router-dom</code>中导出<code>BrowserRouter</code> 或 <code>HashRouter</code>，二者分别对应history模式与哈希模式</p><p>将App用二者之一包裹，即可启用路由：</p><div class="language-tsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// index.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { StrictMode } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ReactDOM </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-dom/client&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App&#39;</span></span>
@@ -38,7 +38,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><p>另外，这里还有一个小技巧，在最末一个路由指定一个path为<code>*</code>的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面</p><h2 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to &quot;嵌套路由&quot;">​</a></h2><p>嵌套路由可以通过在<code>Route</code>组件内部嵌套新的<code>Route</code>组件来实现</p><p>再通过<code>Outlet</code>组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）</p><p>我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand</p><p>同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-EqH6d" id="tab-dxZTm4B" checked="checked"><label for="tab-dxZTm4B">App.jsx </label><input type="radio" name="group-EqH6d" id="tab-4kT2XXZ"><label for="tab-4kT2XXZ">Home.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><p>另外，这里还有一个小技巧，在最末一个路由指定一个path为<code>*</code>的路由匹配规则，可以为路由匹配添加fallback策略，当未匹配到其之前的任何域名时，会展示NotFound页面</p><h2 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to &quot;嵌套路由&quot;">​</a></h2><p>嵌套路由可以通过在<code>Route</code>组件内部嵌套新的<code>Route</code>组件来实现</p><p>再通过<code>Outlet</code>组件来指定嵌套路由的占位元素（类似于VueRouter中的router-view）</p><p>我们在之前的例子的基础上，为Home页面添加两个子页面HomeRanking和HomeRecommand</p><p>同时，我们也应该为Home组件添加默认跳转，就像根路径默认重定向到Home组件那样，进入到Home组件后也应该默认重定向一个子页面中，这里我们仍然使用到了Navigate组件</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-lwbkJ" id="tab-N1P0tMz" checked="checked"><label for="tab-N1P0tMz">App.jsx </label><input type="radio" name="group-lwbkJ" id="tab-aS_14kc"><label for="tab-aS_14kc">Home.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { PureComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Routes, Route, Navigate, NavLink } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-router-dom&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Home </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./views/Home&#39;</span></span>
@@ -73,7 +73,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><h2 id="编程式导航-高阶组件" tabindex="-1">编程式导航（高阶组件） <a class="header-anchor" href="#编程式导航-高阶组件" aria-label="Permalink to &quot;编程式导航（高阶组件）&quot;">​</a></h2><p>之前使用的ReactRouter提供的路由跳转的组件，无论是<code>Link</code>还是<code>NavLink</code>可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转</p><p>ReactRouter提供了编程式导航的API：<code>useNavigate</code></p><p>自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。</p><p>我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件</p><p>封装一个高阶组件<code>withRouter</code>，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-4RuIM" id="tab-RHZK2Ai" checked="checked"><label for="tab-RHZK2Ai">withRouter.js</label><input type="radio" name="group-4RuIM" id="tab-GgioUob"><label for="tab-GgioUob">Home.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// withRouter.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div></div></div><h2 id="编程式导航-高阶组件" tabindex="-1">编程式导航（高阶组件） <a class="header-anchor" href="#编程式导航-高阶组件" aria-label="Permalink to &quot;编程式导航（高阶组件）&quot;">​</a></h2><p>之前使用的ReactRouter提供的路由跳转的组件，无论是<code>Link</code>还是<code>NavLink</code>可定制化能力都比较差，无法实现“点击按钮后跳转路由”这样的需求，那么我们就需要通过编程式导航，使用JS来完成路由的跳转</p><p>ReactRouter提供了编程式导航的API：<code>useNavigate</code></p><p>自ReactRouter6起，编程式导航的API不再支持ClassComponent，全面拥抱Hooks。</p><p>我们将在后续的学习中开启Hooks的写法，那么目前如何在类组件中也能使用Hooks呢？答案是高阶组件</p><p>封装一个高阶组件<code>withRouter</code>，经过高阶组件处理的类组件的props将会携带router对象，上面包含一些我们需要的属性和方法：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-MyqYo" id="tab-5xWnQrP" checked="checked"><label for="tab-5xWnQrP">withRouter.js</label><input type="radio" name="group-MyqYo" id="tab-ZRt22hK"><label for="tab-ZRt22hK">Home.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// withRouter.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useNavigate } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-router-dom&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> withRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">WrapperComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
@@ -100,7 +100,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div></div></div><p>我们使用<code>withRouter</code>高阶组件对Home组件进行了增强，可以通过编程式导航来实现二级路由跳转</p><p>这里只是展示了编程式导航的用法和高阶组件的能力，目前还是尽可能使用Hooks写法编写新项目</p><h2 id="动态路由-路由传参" tabindex="-1">动态路由（路由传参） <a class="header-anchor" href="#动态路由-路由传参" aria-label="Permalink to &quot;动态路由（路由传参）&quot;">​</a></h2><p>传递参数由两种方式：</p><ul><li>动态路由的方式</li><li>查询字符串传递参数</li></ul><p>动态路由是指：路由中的<strong>路径</strong>信息并不会固定</p><ul><li>比如匹配规则为<code>/detail/:id</code>时，<code>/detail/123</code> <code>detail/888</code>都会被匹配上，并将<code>123/888</code>作为id参数传递</li><li>其中<code>/detail/:id</code>这个匹配规则被称为动态路由</li></ul><p>动态路由常见于嵌套路由跳转，比如：从歌曲列表页面点击后跳转到歌曲详情页，可以通过路由传递歌曲的ID，访问到不同歌曲的详情页</p><p>我们在之前的HomeRanking榜单中加入列表和点击跳转功能，并编写一个新的组件Detail来接收来自路由的参数</p><p>同样地，<code>react-router-dom</code>为我们提供了从路由获取参数的API：<code>useParams</code>，它是一个Hooks，我们将它应用到之前编写的高级组件<code>withRouter</code>中</p><ul><li>在使用了<code>withRouter</code>的组件中，就可以通过<code>this.props.router.params.xxx</code>获取到当前路由中传递的参数</li><li>使用动态匹配路由时，传递给Route组件的<code>path</code>属性为<code>:xxx</code>，这里是<code>/detail/:id</code></li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-KRlBV" id="tab-VFxtxUa" checked="checked"><label for="tab-VFxtxUa">withRouter.js</label><input type="radio" name="group-KRlBV" id="tab-lkuLB2P"><label for="tab-lkuLB2P">HomeRanking.jsx</label><input type="radio" name="group-KRlBV" id="tab-kii_rZ4"><label for="tab-kii_rZ4">Detail.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// withRouter.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div></div></div><p>我们使用<code>withRouter</code>高阶组件对Home组件进行了增强，可以通过编程式导航来实现二级路由跳转</p><p>这里只是展示了编程式导航的用法和高阶组件的能力，目前还是尽可能使用Hooks写法编写新项目</p><h2 id="动态路由-路由传参" tabindex="-1">动态路由（路由传参） <a class="header-anchor" href="#动态路由-路由传参" aria-label="Permalink to &quot;动态路由（路由传参）&quot;">​</a></h2><p>传递参数由两种方式：</p><ul><li>动态路由的方式</li><li>查询字符串传递参数</li></ul><p>动态路由是指：路由中的<strong>路径</strong>信息并不会固定</p><ul><li>比如匹配规则为<code>/detail/:id</code>时，<code>/detail/123</code> <code>detail/888</code>都会被匹配上，并将<code>123/888</code>作为id参数传递</li><li>其中<code>/detail/:id</code>这个匹配规则被称为动态路由</li></ul><p>动态路由常见于嵌套路由跳转，比如：从歌曲列表页面点击后跳转到歌曲详情页，可以通过路由传递歌曲的ID，访问到不同歌曲的详情页</p><p>我们在之前的HomeRanking榜单中加入列表和点击跳转功能，并编写一个新的组件Detail来接收来自路由的参数</p><p>同样地，<code>react-router-dom</code>为我们提供了从路由获取参数的API：<code>useParams</code>，它是一个Hooks，我们将它应用到之前编写的高级组件<code>withRouter</code>中</p><ul><li>在使用了<code>withRouter</code>的组件中，就可以通过<code>this.props.router.params.xxx</code>获取到当前路由中传递的参数</li><li>使用动态匹配路由时，传递给Route组件的<code>path</code>属性为<code>:xxx</code>，这里是<code>/detail/:id</code></li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-DbExY" id="tab-vvCtPmK" checked="checked"><label for="tab-vvCtPmK">withRouter.js</label><input type="radio" name="group-DbExY" id="tab-F2cXbQz"><label for="tab-F2cXbQz">HomeRanking.jsx</label><input type="radio" name="group-DbExY" id="tab-axbin20"><label for="tab-axbin20">Detail.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// withRouter.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useNavigate, useParams } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-router-dom&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> withRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">WrapperComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
@@ -165,7 +165,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> router</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { navigate, params, query }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">WrapperComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">props} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">router</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{router} /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>需要注意的是，这里的<code>useSearchParams</code>是一个Hooks的常见形态</p><p>它返回一个数组，数组的首位为值，数组的次位为改变值的方法</p><p>与对象解构不同的是，数组结构是对位解构：保证位置一致则值一致，命名随意</p><p>而对象解构恰恰相反，不必保证位置，而需要保证命名一致</p></div><h2 id="路由的配置方式" tabindex="-1">路由的配置方式 <a class="header-anchor" href="#路由的配置方式" aria-label="Permalink to &quot;路由的配置方式&quot;">​</a></h2><p>至此为止，路由的配置是耦合在<code>App.jsx</code>中的，我们可以将Routes这部分代码抽离出单独的组件，也可以通过配置的方式来完成路由映射关系的编写</p><ul><li>在ReactRouter5版本中，我们可以将路由的映射规则写为JS对象，需要引入第三方库<code>react-router-config</code></li><li>在ReactRouter6版本中，允许我们将其写为配置文件，不需要安装其他内容</li></ul><p>6版本为我们提供了一个API：<code>useRoutes</code>，将我们编写的配置文件传入此函数，可以将其转化为之前编写的组件结构，本质上也是一种语法糖</p><p>需要注意的是，Hooks只能在函数式组件中使用，这里我们将App组件改用FunctionComponent书写了</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-_WhXm" id="tab-ya6OWb9" checked="checked"><label for="tab-ya6OWb9">index.js</label><input type="radio" name="group-_WhXm" id="tab-oJc-TNm"><label for="tab-oJc-TNm">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// router/index.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>需要注意的是，这里的<code>useSearchParams</code>是一个Hooks的常见形态</p><p>它返回一个数组，数组的首位为值，数组的次位为改变值的方法</p><p>与对象解构不同的是，数组结构是对位解构：保证位置一致则值一致，命名随意</p><p>而对象解构恰恰相反，不必保证位置，而需要保证命名一致</p></div><h2 id="路由的配置方式" tabindex="-1">路由的配置方式 <a class="header-anchor" href="#路由的配置方式" aria-label="Permalink to &quot;路由的配置方式&quot;">​</a></h2><p>至此为止，路由的配置是耦合在<code>App.jsx</code>中的，我们可以将Routes这部分代码抽离出单独的组件，也可以通过配置的方式来完成路由映射关系的编写</p><ul><li>在ReactRouter5版本中，我们可以将路由的映射规则写为JS对象，需要引入第三方库<code>react-router-config</code></li><li>在ReactRouter6版本中，允许我们将其写为配置文件，不需要安装其他内容</li></ul><p>6版本为我们提供了一个API：<code>useRoutes</code>，将我们编写的配置文件传入此函数，可以将其转化为之前编写的组件结构，本质上也是一种语法糖</p><p>需要注意的是，Hooks只能在函数式组件中使用，这里我们将App组件改用FunctionComponent书写了</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-u64Fb" id="tab-BY1dKDq" checked="checked"><label for="tab-BY1dKDq">index.js</label><input type="radio" name="group-u64Fb" id="tab-7f98OFz"><label for="tab-7f98OFz">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// router/index.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Navigate } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-router-dom&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Home </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../views/Home&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HomeRanking </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../views/HomeRanking&#39;</span></span>

2
assets/note_React Router.md.DAdaHrZL.lean.js → assets/note_React Router.md.BV8kv6_l.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"React Router","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Router.md","filePath":"note/React Router.md","lastUpdated":1712579063000}'),l={name:"note/React Router.md"},p=n("",71),h=[p];function t(k,e,r,E,d,g){return a(),i("div",null,h)}const o=s(l,[["render",t]]);export{y as __pageData,o as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const y=JSON.parse('{"title":"React Router","description":"","frontmatter":{},"headers":[],"relativePath":"note/React Router.md","filePath":"note/React Router.md","lastUpdated":1712666210000}'),l={name:"note/React Router.md"},p=n("",71),h=[p];function t(k,e,r,E,d,g){return a(),i("div",null,h)}const o=s(l,[["render",t]]);export{y as __pageData,o as default};

4
assets/note_React.md.Dg9Jiqc2.js → assets/note_React.md.CXnG2gwJ.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_React.md.Dg9Jiqc2.lean.js → assets/note_React.md.CXnG2gwJ.lean.js
View File

@@ -1 +1 @@
import{_ as p,c as i,m as s,a,ai as l,o as n}from"./chunks/framework.BFSS5Pox.js";const h="/assets/react-life-cycle.BMg3NRXf.png",t="/assets/prototype-setState.7qIke7Xt.png",N=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","filePath":"note/React.md","lastUpdated":1712579063000}'),k={name:"note/React.md"},e=l("",306),r=s("li",null,"React需要基于两棵新旧虚拟DOM树来判断如何更高效地更新UI",-1),E={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},d={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.566ex"},xmlns:"http://www.w3.org/2000/svg",width:"5.832ex",height:"2.452ex",role:"img",focusable:"false",viewBox:"0 -833.9 2577.6 1083.9","aria-hidden":"true"},g=l("",1),c=[g],y=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"O"),s("mo",{stretchy:"false"},"("),s("msup",null,[s("mi",null,"n"),s("mn",null,"2")]),s("mo",{stretchy:"false"},")")])],-1),b={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},F={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.025ex"},xmlns:"http://www.w3.org/2000/svg",width:"1.357ex",height:"1.025ex",role:"img",focusable:"false",viewBox:"0 -442 600 453","aria-hidden":"true"},o=s("g",{stroke:"currentColor",fill:"currentColor","stroke-width":"0",transform:"scale(1,-1)"},[s("g",{"data-mml-node":"math"},[s("g",{"data-mml-node":"mi"},[s("path",{"data-c":"1D45B",d:"M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z",style:{"stroke-width":"3"}})])])],-1),u=[o],m=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"n")])],-1),C=s("li",null,"如果React中使用了这样的算法，当节点数量提高，那计算量是巨大的，会造成巨量的性能开销，更新性能较差",-1),A={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},D={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.566ex"},xmlns:"http://www.w3.org/2000/svg",width:"4.844ex",height:"2.262ex",role:"img",focusable:"false",viewBox:"0 -750 2141 1000","aria-hidden":"true"},B=l("",1),v=[B],x=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"O"),s("mo",{stretchy:"false"},"("),s("mi",null,"n"),s("mo",{stretchy:"false"},")")])],-1),f=l("",227);function q(S,R,T,P,w,M){return n(),i("div",null,[e,s("ul",null,[r,s("li",null,[a("如果一棵树参考另一棵树完全比较更新，那么即使是最先进的算法，时间复杂度为"),s("mjx-container",E,[(n(),i("svg",d,c)),y]),a("，其中"),s("mjx-container",b,[(n(),i("svg",F,u)),m]),a("是树中节点的数量")]),C]),s("p",null,[a("针对普通diff算法的缺陷，React对其进行了优化，将其时间复杂度优化到了"),s("mjx-container",A,[(n(),i("svg",D,v)),x])]),f])}const Q=p(k,[["render",q]]);export{N as __pageData,Q as default};
import{_ as p,c as i,m as s,a,ai as l,o as n}from"./chunks/framework.BFSS5Pox.js";const h="/assets/react-life-cycle.BMg3NRXf.png",t="/assets/prototype-setState.7qIke7Xt.png",N=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","filePath":"note/React.md","lastUpdated":1712666210000}'),k={name:"note/React.md"},e=l("",306),r=s("li",null,"React需要基于两棵新旧虚拟DOM树来判断如何更高效地更新UI",-1),E={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},d={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.566ex"},xmlns:"http://www.w3.org/2000/svg",width:"5.832ex",height:"2.452ex",role:"img",focusable:"false",viewBox:"0 -833.9 2577.6 1083.9","aria-hidden":"true"},g=l("",1),c=[g],y=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"O"),s("mo",{stretchy:"false"},"("),s("msup",null,[s("mi",null,"n"),s("mn",null,"2")]),s("mo",{stretchy:"false"},")")])],-1),b={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},F={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.025ex"},xmlns:"http://www.w3.org/2000/svg",width:"1.357ex",height:"1.025ex",role:"img",focusable:"false",viewBox:"0 -442 600 453","aria-hidden":"true"},o=s("g",{stroke:"currentColor",fill:"currentColor","stroke-width":"0",transform:"scale(1,-1)"},[s("g",{"data-mml-node":"math"},[s("g",{"data-mml-node":"mi"},[s("path",{"data-c":"1D45B",d:"M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z",style:{"stroke-width":"3"}})])])],-1),u=[o],m=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"n")])],-1),C=s("li",null,"如果React中使用了这样的算法，当节点数量提高，那计算量是巨大的，会造成巨量的性能开销，更新性能较差",-1),A={class:"MathJax",jax:"SVG",style:{direction:"ltr",position:"relative"}},D={style:{overflow:"visible","min-height":"1px","min-width":"1px","vertical-align":"-0.566ex"},xmlns:"http://www.w3.org/2000/svg",width:"4.844ex",height:"2.262ex",role:"img",focusable:"false",viewBox:"0 -750 2141 1000","aria-hidden":"true"},B=l("",1),v=[B],x=s("mjx-assistive-mml",{unselectable:"on",display:"inline",style:{top:"0px",left:"0px",clip:"rect(1px, 1px, 1px, 1px)","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",position:"absolute",padding:"1px 0px 0px 0px",border:"0px",display:"block",width:"auto",overflow:"hidden"}},[s("math",{xmlns:"http://www.w3.org/1998/Math/MathML"},[s("mi",null,"O"),s("mo",{stretchy:"false"},"("),s("mi",null,"n"),s("mo",{stretchy:"false"},")")])],-1),f=l("",227);function q(S,R,T,P,w,M){return n(),i("div",null,[e,s("ul",null,[r,s("li",null,[a("如果一棵树参考另一棵树完全比较更新，那么即使是最先进的算法，时间复杂度为"),s("mjx-container",E,[(n(),i("svg",d,c)),y]),a("，其中"),s("mjx-container",b,[(n(),i("svg",F,u)),m]),a("是树中节点的数量")]),C]),s("p",null,[a("针对普通diff算法的缺陷，React对其进行了优化，将其时间复杂度优化到了"),s("mjx-container",A,[(n(),i("svg",D,v)),x])]),f])}const Q=p(k,[["render",q]]);export{N as __pageData,Q as default};

14
assets/note_Redux.md.D-E6Hz6t.js → assets/note_Redux.md.Dn6dKaKY.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/redux-usage.Ag_Rvrz8.svg",p="/assets/redux-async-action.G4BvyAXf.svg",e="/assets/immutable.k1ikd4ST.gif",u=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1712579063000}'),t={name:"note/Redux.md"},h=n(`<h1 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to &quot;Redux&quot;">​</a></h1><h2 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to &quot;理解JavaScript的纯函数&quot;">​</a></h2><ul><li>函数式编程中有一个非常重要的概念 <strong>纯函数</strong>，JavaScript符合函数式编程的范式，所以也有纯函数的概念 <ul><li>在React开发中，纯函数被多次提及：</li><li>React组件被要求像一个纯函数（为什么是像，因为还有类组件）</li><li>Redux中有一个reducer的概念，同样是要求必须是一个纯函数</li></ul></li><li>掌握纯函数对于理解很多框架的设计都是有帮助的</li></ul><p>一个纯函数必然具备以下特征：</p><ul><li>确定的输入一定产生确定的输出</li><li>函数的执行过程中，不能产生副作用</li></ul><h2 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to &quot;为什么需要Redux&quot;">​</a></h2><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h2 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to &quot;Redux的核心理念&quot;">​</a></h2><p>Redux的核心理念 Store</p><ul><li>定义一个统一的规范来操作数据，这样就可以做到对数据的跟踪</li><li><code>list.push()</code> <code>list[0].age = 18</code></li></ul><p>Redux的核心理念 Action</p><ul><li>Redux要求：要修改数据，必须通过Action来修改</li><li>所有数据的变化，必须通过派发（Patch）Action来更新</li><li>Action是一个普通的JS对象，用来描述此次更新的type与content</li><li><code>const action = { type: &#39;ADD_ITEM&#39;, item: { name: &#39;Ziu&#39;, age: 18 } }</code></li></ul><p>Redux的核心理念 Reducer</p><ul><li>如何将Store和Action联系在一起？</li><li>reducer是一个纯函数</li><li>完成的工作就是：将传入的state和action结合起来，生成一个新的state</li><li><code>patch</code> =&gt; <code>reducer</code> =&gt; <code>newState</code> =&gt; <code>Store</code></li></ul><h2 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to &quot;Redux Demo&quot;">​</a></h2><p>下例中，通过<code>createStore</code>创建了一个Store（已经不推荐了）</p><ul><li>initialState用于在调用<code>createStore</code>时作为默认值传入<code>reducer</code></li><li>后续每次<code>store.dispatch</code>都会调用<code>reducer</code></li><li>通过<code>reducer</code>更新state中的数据</li></ul><p>在React中，可以通过<code>store.subscribe</code>注册State变化的监听回调</p><ul><li>当state发生变化时，通过调用<code>this.forceUpdate</code>触发组件的更新</li><li>一般情况下，我们在<code>componentDidMount</code>注册监听回调，在<code>componentWillUnmount</code>解除监听</li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-0griD" id="tab-fD0BMBR" checked="checked"><label for="tab-fD0BMBR">App.jsx</label><input type="radio" name="group-0griD" id="tab-JzA8hJO"><label for="tab-JzA8hJO">index.js</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/redux-usage.Ag_Rvrz8.svg",p="/assets/redux-async-action.G4BvyAXf.svg",e="/assets/immutable.k1ikd4ST.gif",u=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1712666210000}'),t={name:"note/Redux.md"},h=n(`<h1 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to &quot;Redux&quot;">​</a></h1><h2 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to &quot;理解JavaScript的纯函数&quot;">​</a></h2><ul><li>函数式编程中有一个非常重要的概念 <strong>纯函数</strong>，JavaScript符合函数式编程的范式，所以也有纯函数的概念 <ul><li>在React开发中，纯函数被多次提及：</li><li>React组件被要求像一个纯函数（为什么是像，因为还有类组件）</li><li>Redux中有一个reducer的概念，同样是要求必须是一个纯函数</li></ul></li><li>掌握纯函数对于理解很多框架的设计都是有帮助的</li></ul><p>一个纯函数必然具备以下特征：</p><ul><li>确定的输入一定产生确定的输出</li><li>函数的执行过程中，不能产生副作用</li></ul><h2 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to &quot;为什么需要Redux&quot;">​</a></h2><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h2 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to &quot;Redux的核心理念&quot;">​</a></h2><p>Redux的核心理念 Store</p><ul><li>定义一个统一的规范来操作数据，这样就可以做到对数据的跟踪</li><li><code>list.push()</code> <code>list[0].age = 18</code></li></ul><p>Redux的核心理念 Action</p><ul><li>Redux要求：要修改数据，必须通过Action来修改</li><li>所有数据的变化，必须通过派发（Patch）Action来更新</li><li>Action是一个普通的JS对象，用来描述此次更新的type与content</li><li><code>const action = { type: &#39;ADD_ITEM&#39;, item: { name: &#39;Ziu&#39;, age: 18 } }</code></li></ul><p>Redux的核心理念 Reducer</p><ul><li>如何将Store和Action联系在一起？</li><li>reducer是一个纯函数</li><li>完成的工作就是：将传入的state和action结合起来，生成一个新的state</li><li><code>patch</code> =&gt; <code>reducer</code> =&gt; <code>newState</code> =&gt; <code>Store</code></li></ul><h2 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to &quot;Redux Demo&quot;">​</a></h2><p>下例中，通过<code>createStore</code>创建了一个Store（已经不推荐了）</p><ul><li>initialState用于在调用<code>createStore</code>时作为默认值传入<code>reducer</code></li><li>后续每次<code>store.dispatch</code>都会调用<code>reducer</code></li><li>通过<code>reducer</code>更新state中的数据</li></ul><p>在React中，可以通过<code>store.subscribe</code>注册State变化的监听回调</p><ul><li>当state发生变化时，通过调用<code>this.forceUpdate</code>触发组件的更新</li><li>一般情况下，我们在<code>componentDidMount</code>注册监听回调，在<code>componentWillUnmount</code>解除监听</li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-s-i8M" id="tab-rmHRJfD" checked="checked"><label for="tab-rmHRJfD">App.jsx</label><input type="radio" name="group-s-i8M" id="tab-LA_lbhM"><label for="tab-LA_lbhM">index.js</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { PureComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./store&#39;</span></span>
<span class="line"></span>
@@ -71,7 +71,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> store</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(reducer)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store</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></div></div></div></div><p><img src="`+l+`" alt="redux-usage" loading="lazy"></p><h2 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to &quot;进一步封装&quot;">​</a></h2><p>可以将耦合在一起的代码拆分到不同文件中</p><ul><li>将<code>reducer</code>抽取出来<code>reducer.js</code>，简化<code>store/index.js</code>内容</li><li>将<code>action.type</code>抽取为常量<code>constants.js</code>，使用时做导入，以保证一致性</li><li>将<code>action</code>抽取出来<code>actionFactory.js</code>，用于外部dispatch时规范类型</li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-B5Uzw" id="tab-QmSs9iw" checked="checked"><label for="tab-QmSs9iw">index.js</label><input type="radio" name="group-B5Uzw" id="tab-OudSQZH"><label for="tab-OudSQZH">constants.js</label><input type="radio" name="group-B5Uzw" id="tab-i-J-7ns"><label for="tab-i-J-7ns">reducer.js</label><input type="radio" name="group-B5Uzw" id="tab-gn4y6iD"><label for="tab-gn4y6iD">actionFactory.js</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store</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></div></div></div></div><p><img src="`+l+`" alt="redux-usage" loading="lazy"></p><h2 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to &quot;进一步封装&quot;">​</a></h2><p>可以将耦合在一起的代码拆分到不同文件中</p><ul><li>将<code>reducer</code>抽取出来<code>reducer.js</code>，简化<code>store/index.js</code>内容</li><li>将<code>action.type</code>抽取为常量<code>constants.js</code>，使用时做导入，以保证一致性</li><li>将<code>action</code>抽取出来<code>actionFactory.js</code>，用于外部dispatch时规范类型</li></ul><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-aYMTo" id="tab-ObSsdMq" checked="checked"><label for="tab-ObSsdMq">index.js</label><input type="radio" name="group-aYMTo" id="tab-V8Wq2dR"><label for="tab-V8Wq2dR">constants.js</label><input type="radio" name="group-aYMTo" id="tab-wSlWWsq"><label for="tab-wSlWWsq">reducer.js</label><input type="radio" name="group-aYMTo" id="tab-rSiSNfS"><label for="tab-rSiSNfS">actionFactory.js</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createStore } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;redux&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reducer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./reducer&#39;</span></span>
<span class="line"></span>
@@ -146,7 +146,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><h2 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to &quot;Redux的三大原则&quot;">​</a></h2><p>单一数据源</p><ul><li>整个应用程序的状态都被存储在一棵Object Tree上</li><li>且这个Object Tree只存储在一个Store中</li><li>但Redux并不强制限制创建多Store，不利于数据维护</li><li>单一数据源有利于整个应用程序的维护、追踪、修改</li></ul><p>State属性是只读的</p><ul><li>允许修改State的方法只有patch action，不要直接修改State</li><li>确保了View或网络请求都不能修改State</li><li>保证所有的修改都能被追踪、按照严格的顺序执行，不用担心竞态（race condition）的问题</li></ul><p>使用纯函数来执行修改</p><ul><li>通过reducer将旧State与新State联系在一起，并且返回一个<strong>新的State</strong></li><li>随着应用程序复杂程度增加，可以将reducer拆分为多个小的reducer，分别用于操作不同State Tree的某一部分</li><li>所有的reducer都应该是纯函数，不能产生任何的副作用</li></ul><h2 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to &quot;优化重复代码&quot;">​</a></h2><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>在Profile组件中，通过高阶函数<code>connect</code>实现的</p><p>将store中需要的状态通过<code>mapStoreToProps</code>转为props，并将需要使用store中状态的组件传入调用connect返回的函数中</p><p>在<code>Profile</code>组件中就可以从props中获取到store中的状态</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-TeuDY" id="tab-9IQ_iq-" checked="checked"><label for="tab-9IQ_iq-">App.jsx</label><input type="radio" name="group-TeuDY" id="tab-EY1VqYU"><label for="tab-EY1VqYU">Profile.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><h2 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to &quot;Redux的三大原则&quot;">​</a></h2><p>单一数据源</p><ul><li>整个应用程序的状态都被存储在一棵Object Tree上</li><li>且这个Object Tree只存储在一个Store中</li><li>但Redux并不强制限制创建多Store，不利于数据维护</li><li>单一数据源有利于整个应用程序的维护、追踪、修改</li></ul><p>State属性是只读的</p><ul><li>允许修改State的方法只有patch action，不要直接修改State</li><li>确保了View或网络请求都不能修改State</li><li>保证所有的修改都能被追踪、按照严格的顺序执行，不用担心竞态（race condition）的问题</li></ul><p>使用纯函数来执行修改</p><ul><li>通过reducer将旧State与新State联系在一起，并且返回一个<strong>新的State</strong></li><li>随着应用程序复杂程度增加，可以将reducer拆分为多个小的reducer，分别用于操作不同State Tree的某一部分</li><li>所有的reducer都应该是纯函数，不能产生任何的副作用</li></ul><h2 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to &quot;优化重复代码&quot;">​</a></h2><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>在Profile组件中，通过高阶函数<code>connect</code>实现的</p><p>将store中需要的状态通过<code>mapStoreToProps</code>转为props，并将需要使用store中状态的组件传入调用connect返回的函数中</p><p>在<code>Profile</code>组件中就可以从props中获取到store中的状态</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Lv4jU" id="tab-G3XGDT7" checked="checked"><label for="tab-G3XGDT7">App.jsx</label><input type="radio" name="group-Lv4jU" id="tab-cgnRyMw"><label for="tab-cgnRyMw">Profile.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// App.jsx</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { PureComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Provider } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react-redux&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./store&#39;</span></span>
@@ -216,7 +216,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div><p>本质上是<code>connect</code>内部对操作进行了封装，把逻辑隐藏起来了：</p><ul><li>调用<code>connect</code>这个<strong>高阶函数</strong>，返回一个<strong>高阶组件</strong></li><li>为高阶组件传入映射目标组件，最后高阶组件返回一个新组件</li><li>新组件的props包含了来自Store中状态/dispatch的映射</li></ul><h2 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to &quot;异步Action&quot;">​</a></h2><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> redux-thunk</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>通过<code>applyMiddleware</code>引入<code>redux-thunk</code>这个中间件：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Pv3NV" id="tab-rv7EHWN" checked="checked"><label for="tab-rv7EHWN">index.js</label><input type="radio" name="group-Pv3NV" id="tab-rPB9-PU"><label for="tab-rPB9-PU">actionFactory.js</label><input type="radio" name="group-Pv3NV" id="tab-glfk702"><label for="tab-glfk702">list.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div><p>本质上是<code>connect</code>内部对操作进行了封装，把逻辑隐藏起来了：</p><ul><li>调用<code>connect</code>这个<strong>高阶函数</strong>，返回一个<strong>高阶组件</strong></li><li>为高阶组件传入映射目标组件，最后高阶组件返回一个新组件</li><li>新组件的props包含了来自Store中状态/dispatch的映射</li></ul><h2 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to &quot;异步Action&quot;">​</a></h2><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> redux-thunk</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>通过<code>applyMiddleware</code>引入<code>redux-thunk</code>这个中间件：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-h7esc" id="tab-lbZ3ika" checked="checked"><label for="tab-lbZ3ika">index.js</label><input type="radio" name="group-h7esc" id="tab-jFYF1cd"><label for="tab-jFYF1cd">actionFactory.js</label><input type="radio" name="group-h7esc" id="tab-Wrm0GoM"><label for="tab-Wrm0GoM">list.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createStore, applyMiddleware } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;redux&#39;</span></span>
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thunk </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;redux-thunk&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reducer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./reducer&#39;</span></span>
@@ -316,7 +316,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> counter: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">counterReducer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state.counter, action),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> postList: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">postListReducer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state.postList, action)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><h2 id="reduxtoolkit" tabindex="-1">ReduxToolkit <a class="header-anchor" href="#reduxtoolkit" aria-label="Permalink to &quot;ReduxToolkit&quot;">​</a></h2><ul><li>ReduxToolkit重构</li><li>ReduxToolkit异步</li><li>connect高阶组件</li><li>中间件的实现原理</li><li>React状态管理选择</li></ul><h2 id="认识reduxtoolkit" tabindex="-1">认识ReduxToolkit <a class="header-anchor" href="#认识reduxtoolkit" aria-label="Permalink to &quot;认识ReduxToolkit&quot;">​</a></h2><p>之前在使用<code>createStore</code>创建Store时会出现deprecated标识，推荐我们使用<code>@reduxjs/toolkit</code>包中的<code>configureStore</code>函数</p><p>Redux Toolkit是官方推荐编写Redux逻辑的方法</p><ul><li>在前面学习Redux时已经发现，Redux的逻辑编写过于繁琐、麻烦</li><li>代码分拆在不同模块中，存在大量重复代码</li><li>Redux Toolkit旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题</li><li>这个包常被称为：RTK</li></ul><h2 id="使用reduxtoolkit重写store" tabindex="-1">使用ReduxToolkit重写Store <a class="header-anchor" href="#使用reduxtoolkit重写store" aria-label="Permalink to &quot;使用ReduxToolkit重写Store&quot;">​</a></h2><p>Redux Toolkit依赖于react-redux包，所以需要同时安装这二者</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @reduxjs/toolkit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Redux Toolkit的核心API主要是下述几个：</p><ul><li><code>configureStore</code> 包装createStore以提供简化的配置选项和良好的默认值 <ul><li>可以自动组合你的slice reducer 添加你提供的任何Redux中间件</li><li>默认包含redux-thunk，并启用Redux DevTools Extension</li></ul></li><li><code>createSlice</code> 创建切片 片段 <ul><li>接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有actions</li></ul></li><li><code>createAsyncThunk</code><ul><li>接受一个动作类型字符串和一个返回Promise的函数</li><li>并生成一个<code>pending / fullfilled / rejected</code>基于该承诺分派动作类型的thunk</li></ul></li></ul><p>写一个Demo：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-oZ03D" id="tab-AFfNvZv" checked="checked"><label for="tab-AFfNvZv">index.js</label><input type="radio" name="group-oZ03D" id="tab-p0wGtrD"><label for="tab-p0wGtrD">counter.js</label><input type="radio" name="group-oZ03D" id="tab-wsHBY_r"><label for="tab-wsHBY_r">Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><h2 id="reduxtoolkit" tabindex="-1">ReduxToolkit <a class="header-anchor" href="#reduxtoolkit" aria-label="Permalink to &quot;ReduxToolkit&quot;">​</a></h2><ul><li>ReduxToolkit重构</li><li>ReduxToolkit异步</li><li>connect高阶组件</li><li>中间件的实现原理</li><li>React状态管理选择</li></ul><h2 id="认识reduxtoolkit" tabindex="-1">认识ReduxToolkit <a class="header-anchor" href="#认识reduxtoolkit" aria-label="Permalink to &quot;认识ReduxToolkit&quot;">​</a></h2><p>之前在使用<code>createStore</code>创建Store时会出现deprecated标识，推荐我们使用<code>@reduxjs/toolkit</code>包中的<code>configureStore</code>函数</p><p>Redux Toolkit是官方推荐编写Redux逻辑的方法</p><ul><li>在前面学习Redux时已经发现，Redux的逻辑编写过于繁琐、麻烦</li><li>代码分拆在不同模块中，存在大量重复代码</li><li>Redux Toolkit旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题</li><li>这个包常被称为：RTK</li></ul><h2 id="使用reduxtoolkit重写store" tabindex="-1">使用ReduxToolkit重写Store <a class="header-anchor" href="#使用reduxtoolkit重写store" aria-label="Permalink to &quot;使用ReduxToolkit重写Store&quot;">​</a></h2><p>Redux Toolkit依赖于react-redux包，所以需要同时安装这二者</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @reduxjs/toolkit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> react-redux</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Redux Toolkit的核心API主要是下述几个：</p><ul><li><code>configureStore</code> 包装createStore以提供简化的配置选项和良好的默认值 <ul><li>可以自动组合你的slice reducer 添加你提供的任何Redux中间件</li><li>默认包含redux-thunk，并启用Redux DevTools Extension</li></ul></li><li><code>createSlice</code> 创建切片 片段 <ul><li>接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有actions</li></ul></li><li><code>createAsyncThunk</code><ul><li>接受一个动作类型字符串和一个返回Promise的函数</li><li>并生成一个<code>pending / fullfilled / rejected</code>基于该承诺分派动作类型的thunk</li></ul></li></ul><p>写一个Demo：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-DLLV6" id="tab-1jrAVwD" checked="checked"><label for="tab-1jrAVwD">index.js</label><input type="radio" name="group-DLLV6" id="tab-MBDk4NY"><label for="tab-MBDk4NY">counter.js</label><input type="radio" name="group-DLLV6" id="tab-T8-OJm0"><label for="tab-T8-OJm0">Counter.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/index.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { configureStore } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@reduxjs/toolkit&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> counterSlice </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./features/counter&#39;</span></span>
<span class="line"></span>
@@ -388,7 +388,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div></div></div><p><code>createSlice</code> 函数参数解读</p><ul><li><code>name</code> 标记Slice 展示在dev-tool中</li><li><code>initialState</code> 初始化状态</li><li><code>reducers</code> 对象 对应之前的reducer函数</li><li>返回值: 一个对象 包含所有actions</li></ul><p><code>configureStore</code> 解读</p><ul><li><code>reducer</code> 将slice中的reducer组成一个对象，传入此参数</li><li><code>middleware</code> 额外的中间件 <ul><li>RTK已经为我们集成了<code>redux-thunk</code>和<code>redux-devtool</code>两个中间件</li></ul></li><li><code>devTools</code> 布尔值 是否启用开发者工具</li></ul><h2 id="使用rtk执行异步dispatch" tabindex="-1">使用RTK执行异步dispatch <a class="header-anchor" href="#使用rtk执行异步dispatch" aria-label="Permalink to &quot;使用RTK执行异步dispatch&quot;">​</a></h2><p>实际场景中都是在组件中发起网络请求，并且将状态更新到Store中</p><p>之前的开发中，我们通过<code>redux-thunk</code>这个中间件，让dispatch中可以进行异步操作</p><p>ReduxToolkit默认已经给我们集成了Thunk相关的功能：<code>createAsyncThunk</code></p><p>下面我们使用RTK实现一下这个场景：在Profile中请求postList数据并保存在Store中，并展示出来</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-OsE1O" id="tab-Y2BJCf7" checked="checked"><label for="tab-Y2BJCf7">postList.js</label><input type="radio" name="group-OsE1O" id="tab-wbibk-q"><label for="tab-wbibk-q">index.js</label><input type="radio" name="group-OsE1O" id="tab-_8C-mhS"><label for="tab-_8C-mhS">Profile.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/features/postList.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div></div></div><p><code>createSlice</code> 函数参数解读</p><ul><li><code>name</code> 标记Slice 展示在dev-tool中</li><li><code>initialState</code> 初始化状态</li><li><code>reducers</code> 对象 对应之前的reducer函数</li><li>返回值: 一个对象 包含所有actions</li></ul><p><code>configureStore</code> 解读</p><ul><li><code>reducer</code> 将slice中的reducer组成一个对象，传入此参数</li><li><code>middleware</code> 额外的中间件 <ul><li>RTK已经为我们集成了<code>redux-thunk</code>和<code>redux-devtool</code>两个中间件</li></ul></li><li><code>devTools</code> 布尔值 是否启用开发者工具</li></ul><h2 id="使用rtk执行异步dispatch" tabindex="-1">使用RTK执行异步dispatch <a class="header-anchor" href="#使用rtk执行异步dispatch" aria-label="Permalink to &quot;使用RTK执行异步dispatch&quot;">​</a></h2><p>实际场景中都是在组件中发起网络请求，并且将状态更新到Store中</p><p>之前的开发中，我们通过<code>redux-thunk</code>这个中间件，让dispatch中可以进行异步操作</p><p>ReduxToolkit默认已经给我们集成了Thunk相关的功能：<code>createAsyncThunk</code></p><p>下面我们使用RTK实现一下这个场景：在Profile中请求postList数据并保存在Store中，并展示出来</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-BiwNx" id="tab-L5SdbCN" checked="checked"><label for="tab-L5SdbCN">postList.js</label><input type="radio" name="group-BiwNx" id="tab-zsCiVQ9"><label for="tab-zsCiVQ9">index.js</label><input type="radio" name="group-BiwNx" id="tab-J8WaofA"><label for="tab-J8WaofA">Profile.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// store/features/postList.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createSlice, createAsyncThunk } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@reduxjs/toolkit&#39;</span></span>
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> fetchPostList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createAsyncThunk</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fetch/postList&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -556,7 +556,7 @@ import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">WrapperComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dispatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><p>经过优化后，每次store.state发生变化会触发setState，由React内部的机制来决定组件是否应当重新渲染</p><p>如果组件依赖的state发生变化了，那么React会替我们执行re-render，而不是每次都强制执行re-render</p><p>进一步地，我们可以补充更多细节：</p><ul><li>当组件卸载时解除监听 <ul><li><code>store.subscribe</code>会返回一个<code>unsubscribe</code>函数 用于解除监听</li></ul></li><li>解除与业务代码store的耦合 <ul><li>目前的store来自业务代码 更优的做法是从context中动态获取到store</li><li>应当提供一个context Provider供用户使用</li><li>就像<code>react-redux</code>一样，使用connect前需要将App用Provider包裹并传入store</li></ul></li></ul><p>至此就基本完成了一个connect函数</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-v3C_L" id="tab-WUY-Drm" checked="checked"><label for="tab-WUY-Drm">connect.js</label><input type="radio" name="group-v3C_L" id="tab-_5KhcOR"><label for="tab-_5KhcOR">storeContext.js</label><input type="radio" name="group-v3C_L" id="tab-8rI1Op2"><label for="tab-8rI1Op2">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// connect.js</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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></div></div><p>经过优化后，每次store.state发生变化会触发setState，由React内部的机制来决定组件是否应当重新渲染</p><p>如果组件依赖的state发生变化了，那么React会替我们执行re-render，而不是每次都强制执行re-render</p><p>进一步地，我们可以补充更多细节：</p><ul><li>当组件卸载时解除监听 <ul><li><code>store.subscribe</code>会返回一个<code>unsubscribe</code>函数 用于解除监听</li></ul></li><li>解除与业务代码store的耦合 <ul><li>目前的store来自业务代码 更优的做法是从context中动态获取到store</li><li>应当提供一个context Provider供用户使用</li><li>就像<code>react-redux</code>一样，使用connect前需要将App用Provider包裹并传入store</li></ul></li></ul><p>至此就基本完成了一个connect函数</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-dzPXr" id="tab-mz-oMeQ" checked="checked"><label for="tab-mz-oMeQ">connect.js</label><input type="radio" name="group-dzPXr" id="tab-PbrYXwb"><label for="tab-PbrYXwb">storeContext.js</label><input type="radio" name="group-dzPXr" id="tab-UtJmy5e"><label for="tab-UtJmy5e">App.jsx</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// connect.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { PureComponent } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { StoreContext } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./storeContext&#39;</span></span>
<span class="line"></span>

2
assets/note_Redux.md.D-E6Hz6t.lean.js → assets/note_Redux.md.Dn6dKaKY.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/redux-usage.Ag_Rvrz8.svg",p="/assets/redux-async-action.G4BvyAXf.svg",e="/assets/immutable.k1ikd4ST.gif",u=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1712579063000}'),t={name:"note/Redux.md"},h=n("",152),k=[h];function r(E,d,c,g,y,o){return a(),i("div",null,k)}const F=s(t,[["render",r]]);export{u as __pageData,F as default};
import{_ as s,c as i,o as a,ai as n}from"./chunks/framework.BFSS5Pox.js";const l="/assets/redux-usage.Ag_Rvrz8.svg",p="/assets/redux-async-action.G4BvyAXf.svg",e="/assets/immutable.k1ikd4ST.gif",u=JSON.parse('{"title":"Redux","description":"","frontmatter":{},"headers":[],"relativePath":"note/Redux.md","filePath":"note/Redux.md","lastUpdated":1712666210000}'),t={name:"note/Redux.md"},h=n("",152),k=[h];function r(E,d,c,g,y,o){return a(),i("div",null,k)}const F=s(t,[["render",r]]);export{u as __pageData,F as default};

142
assets/note_Rust.md.Dld38Eiq.js → assets/note_Rust.md.DO1MUx8v.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_Rust.md.Dld38Eiq.lean.js → assets/note_Rust.md.DO1MUx8v.lean.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_SSR.md.BwiHeLzU.js → assets/note_SSR.md.BIP2Abm9.js
View File

File diff suppressed because one or more lines are too long

2
assets/note_SSR.md.BwiHeLzU.lean.js → assets/note_SSR.md.BIP2Abm9.lean.js
View File

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

2
assets/project_ClipboardManager_guide_index.md.BunJNz_G.js → assets/project_ClipboardManager_guide_index.md.jBZRjW6Z.js
View File

@@ -1,4 +1,4 @@
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const n="/assets/sign-mac.CsWUrc-c.png",t="/assets/sign-mac-2.CaUlvIO-.png",l="/assets/mac-chmod.XzooIQy2.jpg",p="/assets/gi4.B4DaR50J.png",o="/assets/gi5.BBqp2jsv.png",d="/assets/webdav.B-S8uzxa.png",C=JSON.parse('{"title":"使用指南","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","filePath":"project/ClipboardManager/guide/index.md","lastUpdated":1712579063000}'),h={name:"project/ClipboardManager/guide/index.md"},r=e('<h1 id="使用指南" tabindex="-1">使用指南 <a class="header-anchor" href="#使用指南" aria-label="Permalink to &quot;使用指南&quot;">​</a></h1><h2 id="二进制监听程序在-macos-的特殊配置" tabindex="-1">二进制监听程序在 MacOS 的特殊配置 <a class="header-anchor" href="#二进制监听程序在-macos-的特殊配置" aria-label="Permalink to &quot;二进制监听程序在 MacOS 的特殊配置&quot;">​</a></h2><p>针对<code>MacOS</code>系统，在将剪贴板监听程序拷贝到指定目录后，请在重启插件后，检查监听程序是否生效</p><p>如果监听程序未生效，可能是：</p><ol><li>需要下载对应芯片的监听程序</li><li>需要对程序进行签名与授权</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>适配了Apple M1芯片的监听程序： <a href="https://github.com/wangyw6716/clipboard-event-handler-mac-apple-silicon-arm64-M1" target="_blank" rel="noreferrer">clipboard-event-handler-mac-apple-silicon-arm64-M1</a></p><p>由于此仓库不在超级剪贴板开发者维护范围内，请自行承担文件安全性带来的风险。</p></div><p><strong>1. 签名</strong></p><p>打开终端输入以下命令</p><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sudo</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> codesign</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --force</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --deep</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --sign</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> -</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><img src="'+n+'" alt="" loading="lazy"></p><p>然后将此目录中的<code>clipboard-event-handler-mac</code>文件拖入终端执行命令</p><p><img src="'+t+'" alt="" loading="lazy"></p><p><strong>2. 授权</strong></p><p>左上角🍎 / 系统偏好设置 / 安全性与隐私 / 通用 / 点击允许</p><p><img src="'+l+`" alt="" loading="lazy"></p><h2 id="如何创造自己的功能按钮" tabindex="-1">如何创造自己的功能按钮 <a class="header-anchor" href="#如何创造自己的功能按钮" aria-label="Permalink to &quot;如何创造自己的功能按钮&quot;">​</a></h2><p>超级剪贴板为用户提供了自定义功能按钮的能力</p><p>这让<code>超级剪贴板</code>真正变得“超级”起来，用户可以通过编写<code>json</code>实现<strong>携带数据跳转到任何其他插件</strong>，这项功能给<code>超级剪贴板</code>带来了无限可能。</p><p>插件中，默认内置了若干使用样例：</p><ul><li>讯飞OCR识别</li><li>百度搜索</li><li>百度识图</li><li>统计文本字数</li><li>颜色管理</li><li>识别图片中二维码</li><li>上传到图床</li><li>翻译</li></ul><p>下面我将从这些样例出发对这项功能做简单介绍：</p><p>这项功能的原理是<code>utools.redirect()</code>，在不分离插件的情况下，在不同插件之间的跳转体验是连贯的。</p><p>以<code>百度搜索</code>为例，是通过<code>网页快开</code>提供的关键词实现的，我们可以编写以下json：</p><div class="language-json vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const n="/assets/sign-mac.CsWUrc-c.png",t="/assets/sign-mac-2.CaUlvIO-.png",l="/assets/mac-chmod.XzooIQy2.jpg",p="/assets/gi4.B4DaR50J.png",o="/assets/gi5.BBqp2jsv.png",d="/assets/webdav.B-S8uzxa.png",C=JSON.parse('{"title":"使用指南","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","filePath":"project/ClipboardManager/guide/index.md","lastUpdated":1712666210000}'),h={name:"project/ClipboardManager/guide/index.md"},r=e('<h1 id="使用指南" tabindex="-1">使用指南 <a class="header-anchor" href="#使用指南" aria-label="Permalink to &quot;使用指南&quot;">​</a></h1><h2 id="二进制监听程序在-macos-的特殊配置" tabindex="-1">二进制监听程序在 MacOS 的特殊配置 <a class="header-anchor" href="#二进制监听程序在-macos-的特殊配置" aria-label="Permalink to &quot;二进制监听程序在 MacOS 的特殊配置&quot;">​</a></h2><p>针对<code>MacOS</code>系统，在将剪贴板监听程序拷贝到指定目录后，请在重启插件后，检查监听程序是否生效</p><p>如果监听程序未生效，可能是：</p><ol><li>需要下载对应芯片的监听程序</li><li>需要对程序进行签名与授权</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>适配了Apple M1芯片的监听程序： <a href="https://github.com/wangyw6716/clipboard-event-handler-mac-apple-silicon-arm64-M1" target="_blank" rel="noreferrer">clipboard-event-handler-mac-apple-silicon-arm64-M1</a></p><p>由于此仓库不在超级剪贴板开发者维护范围内，请自行承担文件安全性带来的风险。</p></div><p><strong>1. 签名</strong></p><p>打开终端输入以下命令</p><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sudo</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> codesign</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --force</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --deep</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --sign</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> -</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><img src="'+n+'" alt="" loading="lazy"></p><p>然后将此目录中的<code>clipboard-event-handler-mac</code>文件拖入终端执行命令</p><p><img src="'+t+'" alt="" loading="lazy"></p><p><strong>2. 授权</strong></p><p>左上角🍎 / 系统偏好设置 / 安全性与隐私 / 通用 / 点击允许</p><p><img src="'+l+`" alt="" loading="lazy"></p><h2 id="如何创造自己的功能按钮" tabindex="-1">如何创造自己的功能按钮 <a class="header-anchor" href="#如何创造自己的功能按钮" aria-label="Permalink to &quot;如何创造自己的功能按钮&quot;">​</a></h2><p>超级剪贴板为用户提供了自定义功能按钮的能力</p><p>这让<code>超级剪贴板</code>真正变得“超级”起来，用户可以通过编写<code>json</code>实现<strong>携带数据跳转到任何其他插件</strong>，这项功能给<code>超级剪贴板</code>带来了无限可能。</p><p>插件中，默认内置了若干使用样例：</p><ul><li>讯飞OCR识别</li><li>百度搜索</li><li>百度识图</li><li>统计文本字数</li><li>颜色管理</li><li>识别图片中二维码</li><li>上传到图床</li><li>翻译</li></ul><p>下面我将从这些样例出发对这项功能做简单介绍：</p><p>这项功能的原理是<code>utools.redirect()</code>，在不分离插件的情况下，在不同插件之间的跳转体验是连贯的。</p><p>以<code>百度搜索</code>为例，是通过<code>网页快开</code>提供的关键词实现的，我们可以编写以下json：</p><div class="language-json vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;id&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom.1663490859&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;百度搜索&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;🔍&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>

2
assets/project_ClipboardManager_guide_index.md.BunJNz_G.lean.js → assets/project_ClipboardManager_guide_index.md.jBZRjW6Z.lean.js
View File

@@ -1 +1 @@
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const n="/assets/sign-mac.CsWUrc-c.png",t="/assets/sign-mac-2.CaUlvIO-.png",l="/assets/mac-chmod.XzooIQy2.jpg",p="/assets/gi4.B4DaR50J.png",o="/assets/gi5.BBqp2jsv.png",d="/assets/webdav.B-S8uzxa.png",C=JSON.parse('{"title":"使用指南","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","filePath":"project/ClipboardManager/guide/index.md","lastUpdated":1712579063000}'),h={name:"project/ClipboardManager/guide/index.md"},r=e("",42),c=[r];function k(g,u,E,b,m,F){return a(),i("div",null,c)}const q=s(h,[["render",k]]);export{C as __pageData,q as default};
import{_ as s,c as i,o as a,ai as e}from"./chunks/framework.BFSS5Pox.js";const n="/assets/sign-mac.CsWUrc-c.png",t="/assets/sign-mac-2.CaUlvIO-.png",l="/assets/mac-chmod.XzooIQy2.jpg",p="/assets/gi4.B4DaR50J.png",o="/assets/gi5.BBqp2jsv.png",d="/assets/webdav.B-S8uzxa.png",C=JSON.parse('{"title":"使用指南","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","filePath":"project/ClipboardManager/guide/index.md","lastUpdated":1712666210000}'),h={name:"project/ClipboardManager/guide/index.md"},r=e("",42),c=[r];function k(g,u,E,b,m,F){return a(),i("div",null,c)}const q=s(h,[["render",k]]);export{C as __pageData,q as default};

2
assets/project_ClipboardManager_index.md.v2ctbkl6.js → assets/project_ClipboardManager_index.md.biZc9O6U.js
View File

@@ -1 +1 @@
import{E as e,c as r,J as t,aj as o,ak as l,m as c,ai as g,o as d}from"./chunks/framework.BFSS5Pox.js";const p="/assets/logo.C7LGHB77.png",m="/assets/img1.CilwEwxr.png",_="/assets/img2.DExXH7cH.png",u="/assets/img3.DkeOHkXi.png",h="/assets/img4.BBHYQ9_R.png",b="/assets/img5.CiycAJY2.png",f="/assets/img6.xJYndy_X.png",C="/assets/img7.CLJZk0sP.png",k=c("br",null,null,-1),x=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据加密保存在本地</li><li>✅ 支持置顶、收藏、编辑、转存、多选、WebDAV同步、局域网共享等强大功能</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://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),q=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","filePath":"project/ClipboardManager/index.md","lastUpdated":1712579063000}'),P={name:"project/ClipboardManager/index.md"},B=Object.assign(P,{setup(S){const a={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]},s=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:C}];return(T,D)=>{const i=e("Title"),n=e("ImgSlider");return d(),r("div",null,[t(i,o(l(a)),null,16),k,t(n,{imgSliderList:s}),x])}}});export{q as __pageData,B as default};
import{E as e,c as r,J as t,aj as o,ak as l,m as c,ai as g,o as d}from"./chunks/framework.BFSS5Pox.js";const p="/assets/logo.C7LGHB77.png",m="/assets/img1.CilwEwxr.png",_="/assets/img2.DExXH7cH.png",u="/assets/img3.DkeOHkXi.png",h="/assets/img4.BBHYQ9_R.png",b="/assets/img5.CiycAJY2.png",f="/assets/img6.xJYndy_X.png",C="/assets/img7.CLJZk0sP.png",k=c("br",null,null,-1),x=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据加密保存在本地</li><li>✅ 支持置顶、收藏、编辑、转存、多选、WebDAV同步、局域网共享等强大功能</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://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),q=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","filePath":"project/ClipboardManager/index.md","lastUpdated":1712666210000}'),P={name:"project/ClipboardManager/index.md"},B=Object.assign(P,{setup(S){const a={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]},s=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:C}];return(T,D)=>{const i=e("Title"),n=e("ImgSlider");return d(),r("div",null,[t(i,o(l(a)),null,16),k,t(n,{imgSliderList:s}),x])}}});export{q as __pageData,B as default};

2
assets/project_ClipboardManager_index.md.v2ctbkl6.lean.js → assets/project_ClipboardManager_index.md.biZc9O6U.lean.js
View File

@@ -1 +1 @@
import{E as e,c as r,J as t,aj as o,ak as l,m as c,ai as g,o as d}from"./chunks/framework.BFSS5Pox.js";const p="/assets/logo.C7LGHB77.png",m="/assets/img1.CilwEwxr.png",_="/assets/img2.DExXH7cH.png",u="/assets/img3.DkeOHkXi.png",h="/assets/img4.BBHYQ9_R.png",b="/assets/img5.CiycAJY2.png",f="/assets/img6.xJYndy_X.png",C="/assets/img7.CLJZk0sP.png",k=c("br",null,null,-1),x=g("",6),q=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","filePath":"project/ClipboardManager/index.md","lastUpdated":1712579063000}'),P={name:"project/ClipboardManager/index.md"},B=Object.assign(P,{setup(S){const a={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]},s=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:C}];return(T,D)=>{const i=e("Title"),n=e("ImgSlider");return d(),r("div",null,[t(i,o(l(a)),null,16),k,t(n,{imgSliderList:s}),x])}}});export{q as __pageData,B as default};
import{E as e,c as r,J as t,aj as o,ak as l,m as c,ai as g,o as d}from"./chunks/framework.BFSS5Pox.js";const p="/assets/logo.C7LGHB77.png",m="/assets/img1.CilwEwxr.png",_="/assets/img2.DExXH7cH.png",u="/assets/img3.DkeOHkXi.png",h="/assets/img4.BBHYQ9_R.png",b="/assets/img5.CiycAJY2.png",f="/assets/img6.xJYndy_X.png",C="/assets/img7.CLJZk0sP.png",k=c("br",null,null,-1),x=g("",6),q=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","filePath":"project/ClipboardManager/index.md","lastUpdated":1712666210000}'),P={name:"project/ClipboardManager/index.md"},B=Object.assign(P,{setup(S){const a={subTitle:"✨ 强大的剪贴板管理工具。",logo:p,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]},s=[{src:m},{src:_},{src:u},{src:h},{src:b},{src:f},{src:C}];return(T,D)=>{const i=e("Title"),n=e("ImgSlider");return d(),r("div",null,[t(i,o(l(a)),null,16),k,t(n,{imgSliderList:s}),x])}}});export{q as __pageData,B as default};

2
assets/project_ClipboardManager_log_index.md.B8Sp5Fu-.js → assets/project_ClipboardManager_log_index.md.BoyglTXe.js
View File

File diff suppressed because one or more lines are too long

2
assets/project_ClipboardManager_log_index.md.B8Sp5Fu-.lean.js → assets/project_ClipboardManager_log_index.md.BoyglTXe.lean.js
View File

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

2
assets/project_ClipboardManager_statement_index.md.CptILqcR.js → assets/project_ClipboardManager_statement_index.md.DQbbB9yG.js
View File

File diff suppressed because one or more lines are too long

2
assets/project_ClipboardManager_statement_index.md.CptILqcR.lean.js → assets/project_ClipboardManager_statement_index.md.DQbbB9yG.lean.js
View File

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

2
assets/project_JSRunner_index.md.BZjde5Cw.js → assets/project_JSRunner_index.md.PjuLOtUY.js
View File

@@ -1 +1 @@
import{E as e,c as l,J as t,aj as s,ak as c,m as r,ai as d,o as m}from"./chunks/framework.BFSS5Pox.js";const _="/assets/logo.Dh5kCjFH.png",g="/assets/img1.CodJ-4dJ.png",p="/assets/img2.BNfSdb6l.png",u="/assets/img3.DQIUwMe_.png",S="/assets/img4.BjAgaoVd.png",h=r("br",null,null,-1),C=d('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><ul><li>✅ 运行JavaScript代码 快速验证代码逻辑</li><li>✅ 支持切换NodeJS/浏览器操作环境</li><li>✅ <code>Ctrl/Command+R</code> 快速运行代码</li><li>✅ <code>Ctrl/Command+Q</code> 清除控制台</li><li>✅ <code>Ctrl/Command+N</code> 创建新的代码片段</li><li>✅ <code>Ctrl/Command+E</code> 切换锁定状态</li><li>✅ <code>Ctrl/Command+Shift+P</code> 调用命令面板</li><li>✅ <code>Ctrl/Command+Shift+L</code> 列出所有历史记录</li><li>✅ 支持回溯代码历史 支持保存/编辑代码运行历史</li><li>✅ 支持手动触发代码执行/实时运行代码</li><li>✅ 支持顶层await 适配深色模式</li></ul>',2),N=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/index.md","filePath":"project/JSRunner/index.md","lastUpdated":1712579063000}'),f={name:"project/JSRunner/index.md"},P=Object.assign(f,{setup(J){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:_,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},i=[{src:g},{src:p},{src:u},{src:S}];return(b,v)=>{const o=e("Title"),n=e("ImgSlider");return m(),l("div",null,[t(o,s(c(a)),null,16),h,t(n,{imgSliderList:i}),C])}}});export{N as __pageData,P as default};
import{E as e,c as l,J as t,aj as s,ak as c,m as r,ai as d,o as m}from"./chunks/framework.BFSS5Pox.js";const _="/assets/logo.Dh5kCjFH.png",g="/assets/img1.CodJ-4dJ.png",p="/assets/img2.BNfSdb6l.png",u="/assets/img3.DQIUwMe_.png",S="/assets/img4.BjAgaoVd.png",h=r("br",null,null,-1),C=d('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><ul><li>✅ 运行JavaScript代码 快速验证代码逻辑</li><li>✅ 支持切换NodeJS/浏览器操作环境</li><li>✅ <code>Ctrl/Command+R</code> 快速运行代码</li><li>✅ <code>Ctrl/Command+Q</code> 清除控制台</li><li>✅ <code>Ctrl/Command+N</code> 创建新的代码片段</li><li>✅ <code>Ctrl/Command+E</code> 切换锁定状态</li><li>✅ <code>Ctrl/Command+Shift+P</code> 调用命令面板</li><li>✅ <code>Ctrl/Command+Shift+L</code> 列出所有历史记录</li><li>✅ 支持回溯代码历史 支持保存/编辑代码运行历史</li><li>✅ 支持手动触发代码执行/实时运行代码</li><li>✅ 支持顶层await 适配深色模式</li></ul>',2),N=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/index.md","filePath":"project/JSRunner/index.md","lastUpdated":1712666210000}'),f={name:"project/JSRunner/index.md"},P=Object.assign(f,{setup(J){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:_,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},i=[{src:g},{src:p},{src:u},{src:S}];return(b,v)=>{const o=e("Title"),n=e("ImgSlider");return m(),l("div",null,[t(o,s(c(a)),null,16),h,t(n,{imgSliderList:i}),C])}}});export{N as __pageData,P as default};

2
assets/project_JSRunner_index.md.BZjde5Cw.lean.js → assets/project_JSRunner_index.md.PjuLOtUY.lean.js
View File

@@ -1 +1 @@
import{E as e,c as l,J as t,aj as s,ak as c,m as r,ai as d,o as m}from"./chunks/framework.BFSS5Pox.js";const _="/assets/logo.Dh5kCjFH.png",g="/assets/img1.CodJ-4dJ.png",p="/assets/img2.BNfSdb6l.png",u="/assets/img3.DQIUwMe_.png",S="/assets/img4.BjAgaoVd.png",h=r("br",null,null,-1),C=d("",2),N=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/index.md","filePath":"project/JSRunner/index.md","lastUpdated":1712579063000}'),f={name:"project/JSRunner/index.md"},P=Object.assign(f,{setup(J){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:_,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},i=[{src:g},{src:p},{src:u},{src:S}];return(b,v)=>{const o=e("Title"),n=e("ImgSlider");return m(),l("div",null,[t(o,s(c(a)),null,16),h,t(n,{imgSliderList:i}),C])}}});export{N as __pageData,P as default};
import{E as e,c as l,J as t,aj as s,ak as c,m as r,ai as d,o as m}from"./chunks/framework.BFSS5Pox.js";const _="/assets/logo.Dh5kCjFH.png",g="/assets/img1.CodJ-4dJ.png",p="/assets/img2.BNfSdb6l.png",u="/assets/img3.DQIUwMe_.png",S="/assets/img4.BjAgaoVd.png",h=r("br",null,null,-1),C=d("",2),N=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/index.md","filePath":"project/JSRunner/index.md","lastUpdated":1712666210000}'),f={name:"project/JSRunner/index.md"},P=Object.assign(f,{setup(J){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:_,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},i=[{src:g},{src:p},{src:u},{src:S}];return(b,v)=>{const o=e("Title"),n=e("ImgSlider");return m(),l("div",null,[t(o,s(c(a)),null,16),h,t(n,{imgSliderList:i}),C])}}});export{N as __pageData,P as default};

2
assets/project_JSRunner_log_index.md.CfCBZuZw.js → assets/project_JSRunner_log_index.md.CfN2xeoV.js
View File

File diff suppressed because one or more lines are too long

2
assets/project_JSRunner_log_index.md.CfCBZuZw.lean.js → assets/project_JSRunner_log_index.md.CfN2xeoV.lean.js
View File

@@ -1 +1 @@
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/log/index.md","filePath":"project/JSRunner/log/index.md","lastUpdated":1712579063000}'),t={name:"project/JSRunner/log/index.md"},o=i("",43),r=[o];function d(c,h,n,u,f,v){return l(),e("div",null,r)}const b=a(t,[["render",d]]);export{p as __pageData,b as default};
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/JSRunner/log/index.md","filePath":"project/JSRunner/log/index.md","lastUpdated":1712666210000}'),t={name:"project/JSRunner/log/index.md"},o=i("",43),r=[o];function d(c,h,n,u,f,v){return l(),e("div",null,r)}const b=a(t,[["render",d]]);export{p as __pageData,b as default};

2
assets/project_Markdown_index.md.D6VOfH3k.js → assets/project_Markdown_index.md.DJueifE0.js
View File

@@ -1 +1 @@
import{E as t,c as s,J as e,aj as r,ak as l,m as c,ai as d,o as _}from"./chunks/framework.BFSS5Pox.js";const m="/assets/logo.D7eZ7NmG.png",g="/assets/img1.6_phg6lK.png",p="/assets/img2.nC0tpRIj.png",u="/assets/img3.DxgCTBq8.png",h=c("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,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/index.md","filePath":"project/Markdown/index.md","lastUpdated":1712579063000}'),M={name:"project/Markdown/index.md"},j=Object.assign(M,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/SuperMarkdown"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/SuperMarkdown"},{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(S,T)=>{const i=t("Title"),n=t("ImgSlider");return _(),s("div",null,[e(i,r(l(a)),null,16),h,e(n,{imgSliderList:o}),k])}}});export{w as __pageData,j as default};
import{E as t,c as s,J as e,aj as r,ak as l,m as c,ai as d,o as _}from"./chunks/framework.BFSS5Pox.js";const m="/assets/logo.D7eZ7NmG.png",g="/assets/img1.6_phg6lK.png",p="/assets/img2.nC0tpRIj.png",u="/assets/img3.DxgCTBq8.png",h=c("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,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/index.md","filePath":"project/Markdown/index.md","lastUpdated":1712666210000}'),M={name:"project/Markdown/index.md"},j=Object.assign(M,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/SuperMarkdown"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/SuperMarkdown"},{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(S,T)=>{const i=t("Title"),n=t("ImgSlider");return _(),s("div",null,[e(i,r(l(a)),null,16),h,e(n,{imgSliderList:o}),k])}}});export{w as __pageData,j as default};

2
assets/project_Markdown_index.md.D6VOfH3k.lean.js → assets/project_Markdown_index.md.DJueifE0.lean.js
View File

@@ -1 +1 @@
import{E as t,c as s,J as e,aj as r,ak as l,m as c,ai as d,o as _}from"./chunks/framework.BFSS5Pox.js";const m="/assets/logo.D7eZ7NmG.png",g="/assets/img1.6_phg6lK.png",p="/assets/img2.nC0tpRIj.png",u="/assets/img3.DxgCTBq8.png",h=c("br",null,null,-1),k=d("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/index.md","filePath":"project/Markdown/index.md","lastUpdated":1712579063000}'),M={name:"project/Markdown/index.md"},j=Object.assign(M,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/SuperMarkdown"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/SuperMarkdown"},{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(S,T)=>{const i=t("Title"),n=t("ImgSlider");return _(),s("div",null,[e(i,r(l(a)),null,16),h,e(n,{imgSliderList:o}),k])}}});export{w as __pageData,j as default};
import{E as t,c as s,J as e,aj as r,ak as l,m as c,ai as d,o as _}from"./chunks/framework.BFSS5Pox.js";const m="/assets/logo.D7eZ7NmG.png",g="/assets/img1.6_phg6lK.png",p="/assets/img2.nC0tpRIj.png",u="/assets/img3.DxgCTBq8.png",h=c("br",null,null,-1),k=d("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/index.md","filePath":"project/Markdown/index.md","lastUpdated":1712666210000}'),M={name:"project/Markdown/index.md"},j=Object.assign(M,{setup(f){const a={subTitle:"✨ 强大的Markdown编辑器",logo:m,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/SuperMarkdown"},{content:"👨🏻‍💻 开源地址",target:"https://github.com/ZiuChen/SuperMarkdown"},{content:"🚀 快捷键一览",target:"./shortcut/"},{content:"🚚 更新日志",target:"./log/"}]},o=[{src:g},{src:p},{src:u}];return(S,T)=>{const i=t("Title"),n=t("ImgSlider");return _(),s("div",null,[e(i,r(l(a)),null,16),h,e(n,{imgSliderList:o}),k])}}});export{w as __pageData,j as default};

2
assets/project_Markdown_log_index.md.BTxrr18L.js → assets/project_Markdown_log_index.md.BJa_jrVy.js
View File

@@ -1 +1 @@
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/log/index.md","filePath":"project/Markdown/log/index.md","lastUpdated":1712579063000}'),t={name:"project/Markdown/log/index.md"},o=i('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-2-1" tabindex="-1">v1.2.1 <a class="header-anchor" href="#v1-2-1" aria-label="Permalink to &quot;v1.2.1&quot;">​</a></h2><p><code>2023-10-12</code></p><ul><li>feat: 适配深色模式</li><li>feat: 折叠侧栏按钮移动至顶部</li></ul><h2 id="v1-2-0" tabindex="-1">v1.2.0 <a class="header-anchor" href="#v1-2-0" aria-label="Permalink to &quot;v1.2.0&quot;">​</a></h2><p><code>2023-06-24</code></p><ul><li>feat: 更新依赖 支持Mindmap与Timeline</li><li>feat: 导出MD文档功能增强 支持导出为本地图片</li><li>feat: 支持展示Base64编码图片</li></ul><h2 id="v1-1-4" tabindex="-1">v1.1.4 <a class="header-anchor" href="#v1-1-4" aria-label="Permalink to &quot;v1.1.4&quot;">​</a></h2><p><code>2023-04-23</code></p><ul><li>feat: 关于页增加插件开源地址</li></ul><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>',28),r=[o];function d(c,n,h,s,f,u){return l(),e("div",null,r)}const x=a(t,[["render",d]]);export{p as __pageData,x as default};
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/log/index.md","filePath":"project/Markdown/log/index.md","lastUpdated":1712666210000}'),t={name:"project/Markdown/log/index.md"},o=i('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-2-1" tabindex="-1">v1.2.1 <a class="header-anchor" href="#v1-2-1" aria-label="Permalink to &quot;v1.2.1&quot;">​</a></h2><p><code>2023-10-12</code></p><ul><li>feat: 适配深色模式</li><li>feat: 折叠侧栏按钮移动至顶部</li></ul><h2 id="v1-2-0" tabindex="-1">v1.2.0 <a class="header-anchor" href="#v1-2-0" aria-label="Permalink to &quot;v1.2.0&quot;">​</a></h2><p><code>2023-06-24</code></p><ul><li>feat: 更新依赖 支持Mindmap与Timeline</li><li>feat: 导出MD文档功能增强 支持导出为本地图片</li><li>feat: 支持展示Base64编码图片</li></ul><h2 id="v1-1-4" tabindex="-1">v1.1.4 <a class="header-anchor" href="#v1-1-4" aria-label="Permalink to &quot;v1.1.4&quot;">​</a></h2><p><code>2023-04-23</code></p><ul><li>feat: 关于页增加插件开源地址</li></ul><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>',28),r=[o];function d(c,n,h,s,f,u){return l(),e("div",null,r)}const x=a(t,[["render",d]]);export{p as __pageData,x as default};

2
assets/project_Markdown_log_index.md.BTxrr18L.lean.js → assets/project_Markdown_log_index.md.BJa_jrVy.lean.js
View File

@@ -1 +1 @@
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/log/index.md","filePath":"project/Markdown/log/index.md","lastUpdated":1712579063000}'),t={name:"project/Markdown/log/index.md"},o=i("",28),r=[o];function d(c,n,h,s,f,u){return l(),e("div",null,r)}const x=a(t,[["render",d]]);export{p as __pageData,x as default};
import{_ as a,c as e,o as l,ai as i}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/log/index.md","filePath":"project/Markdown/log/index.md","lastUpdated":1712666210000}'),t={name:"project/Markdown/log/index.md"},o=i("",28),r=[o];function d(c,n,h,s,f,u){return l(),e("div",null,r)}const x=a(t,[["render",d]]);export{p as __pageData,x as default};

2
assets/project_Markdown_shortcut_index.md.BgbPNoD5.js → assets/project_Markdown_shortcut_index.md.CqNe0p77.js
View File

@@ -1 +1 @@
import{_ as e,c as o,o as d,ai as c}from"./chunks/framework.BFSS5Pox.js";const f=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","filePath":"project/Markdown/shortcut/index.md","lastUpdated":1712579063000}'),p={name:"project/Markdown/shortcut/index.md"},a=c('<h1 id="快捷键一览" tabindex="-1">快捷键一览 <a class="header-anchor" href="#快捷键一览" aria-label="Permalink to &quot;快捷键一览&quot;">​</a></h1><p>粗体 <code>Cmd-B</code></p><p>斜体 <code>Cmd-I</code></p><p>链接 <code>Cmd-K</code></p><p>图片 <code>Shift-Cmd-I</code></p><p>代码 <code>Shift-Cmd-K</code></p><p>代码块 <code>Shift-Cmd-C</code></p><p>无序列表 <code>Shift-Cmd-U</code></p><p>有序列表 <code>Shift-Cmd-O</code></p><h2 id="markdown-语法" tabindex="-1">Markdown 语法 <a class="header-anchor" href="#markdown-语法" aria-label="Permalink to &quot;Markdown 语法&quot;">​</a></h2><p>一级标题 <code># 标题</code></p><p>二级标题 <code>## 标题</code></p><p>三级标题 <code>### 标题</code></p><p>粗体 <code>**粗体文本**</code></p><p>斜体 <code>*斜体文本*</code></p><p>引用 <code>&gt; 引用文本</code></p><p>链接 <code>[链接描述](url)</code></p><p>图片 <code>![alt](url &quot;图片描述&quot;)</code></p><p>代码 <code>代码</code></p><p>代码块 <code> ```编程语言↵</code></p><p>无序列表 <code>- 项目</code></p><p>有序列表 <code>1. 项目</code></p><p>分割线 <code>---</code></p><p>删除线 <code>~~文本~~</code></p><p>任务列表 <code>- [ ] 待办事项</code></p><p>行内公式 <code>$公式$</code></p><p>块级公式 <code>$$↵公式↵$$</code></p><p>Mermaid图表 <code> ```mermaid</code></p>',28),t=[a];function r(n,i,s,_,h,l){return d(),o("div",null,t)}const u=e(p,[["render",r]]);export{f as __pageData,u as default};
import{_ as e,c as o,o as d,ai as c}from"./chunks/framework.BFSS5Pox.js";const f=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","filePath":"project/Markdown/shortcut/index.md","lastUpdated":1712666210000}'),p={name:"project/Markdown/shortcut/index.md"},a=c('<h1 id="快捷键一览" tabindex="-1">快捷键一览 <a class="header-anchor" href="#快捷键一览" aria-label="Permalink to &quot;快捷键一览&quot;">​</a></h1><p>粗体 <code>Cmd-B</code></p><p>斜体 <code>Cmd-I</code></p><p>链接 <code>Cmd-K</code></p><p>图片 <code>Shift-Cmd-I</code></p><p>代码 <code>Shift-Cmd-K</code></p><p>代码块 <code>Shift-Cmd-C</code></p><p>无序列表 <code>Shift-Cmd-U</code></p><p>有序列表 <code>Shift-Cmd-O</code></p><h2 id="markdown-语法" tabindex="-1">Markdown 语法 <a class="header-anchor" href="#markdown-语法" aria-label="Permalink to &quot;Markdown 语法&quot;">​</a></h2><p>一级标题 <code># 标题</code></p><p>二级标题 <code>## 标题</code></p><p>三级标题 <code>### 标题</code></p><p>粗体 <code>**粗体文本**</code></p><p>斜体 <code>*斜体文本*</code></p><p>引用 <code>&gt; 引用文本</code></p><p>链接 <code>[链接描述](url)</code></p><p>图片 <code>![alt](url &quot;图片描述&quot;)</code></p><p>代码 <code>代码</code></p><p>代码块 <code> ```编程语言↵</code></p><p>无序列表 <code>- 项目</code></p><p>有序列表 <code>1. 项目</code></p><p>分割线 <code>---</code></p><p>删除线 <code>~~文本~~</code></p><p>任务列表 <code>- [ ] 待办事项</code></p><p>行内公式 <code>$公式$</code></p><p>块级公式 <code>$$↵公式↵$$</code></p><p>Mermaid图表 <code> ```mermaid</code></p>',28),t=[a];function r(n,i,s,_,h,l){return d(),o("div",null,t)}const u=e(p,[["render",r]]);export{f as __pageData,u as default};

2
assets/project_Markdown_shortcut_index.md.BgbPNoD5.lean.js → assets/project_Markdown_shortcut_index.md.CqNe0p77.lean.js
View File

@@ -1 +1 @@
import{_ as e,c as o,o as d,ai as c}from"./chunks/framework.BFSS5Pox.js";const f=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","filePath":"project/Markdown/shortcut/index.md","lastUpdated":1712579063000}'),p={name:"project/Markdown/shortcut/index.md"},a=c("",28),t=[a];function r(n,i,s,_,h,l){return d(),o("div",null,t)}const u=e(p,[["render",r]]);export{f as __pageData,u as default};
import{_ as e,c as o,o as d,ai as c}from"./chunks/framework.BFSS5Pox.js";const f=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","filePath":"project/Markdown/shortcut/index.md","lastUpdated":1712666210000}'),p={name:"project/Markdown/shortcut/index.md"},a=c("",28),t=[a];function r(n,i,s,_,h,l){return d(),o("div",null,t)}const u=e(p,[["render",r]]);export{f as __pageData,u as default};

2
assets/project_SmartWordBreak_index.md.B8sIKCxn.js → assets/project_SmartWordBreak_index.md.SWrNaNJj.js
View File

@@ -1 +1 @@
import{E as e,c as l,J as i,aj as o,ak as r,ai as s,o as n}from"./chunks/framework.BFSS5Pox.js";const c="/assets/img1.CQpAFJeA.png",d="/assets/img2.DNfJmi3e.png",p="/assets/logo.DXjn29aa.png",_=s('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>服务器不会保留处理的数据, 但请避免使用此功能处理敏感数据</strong></p><ul><li>✅ 支持选中文本后通过超级面板直接进入分词</li><li>✅ 支持直接读取剪贴板文本分词</li><li>✅ 支持单选/拖拽/跨段落快速拖选</li><li>✅ 支持一键合并复制/粘贴/翻译/搜索</li><li>✅ 普通用户有每日免费额度 每日0:00重置</li><li>✅ 优雅、迅速的动效与交互 适配深色模式</li><li>✅ 可以通过插件内入口获取更多额度</li><li>✅ 与<code>超级剪贴板</code>插件集成，一次购买 多处使用</li></ul><hr><p><img src="'+c+'" alt="" loading="lazy"></p><p><img src="'+d+'" alt="" loading="lazy"></p><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/1Shq6mtU9tjhICvcawrp9Ug?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul>',8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","filePath":"project/SmartWordBreak/index.md","lastUpdated":1712579063000}'),m={name:"project/SmartWordBreak/index.md"},k=Object.assign(m,{setup(g){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(h,u)=>{const a=e("Title");return n(),l("div",null,[i(a,o(r(t)),null,16),_])}}});export{b as __pageData,k as default};
import{E as e,c as l,J as i,aj as o,ak as r,ai as s,o as n}from"./chunks/framework.BFSS5Pox.js";const c="/assets/img1.CQpAFJeA.png",d="/assets/img2.DNfJmi3e.png",p="/assets/logo.DXjn29aa.png",_=s('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to &quot;🔰 开始使用&quot;">​</a></h2><p><strong>服务器不会保留处理的数据, 但请避免使用此功能处理敏感数据</strong></p><ul><li>✅ 支持选中文本后通过超级面板直接进入分词</li><li>✅ 支持直接读取剪贴板文本分词</li><li>✅ 支持单选/拖拽/跨段落快速拖选</li><li>✅ 支持一键合并复制/粘贴/翻译/搜索</li><li>✅ 普通用户有每日免费额度 每日0:00重置</li><li>✅ 优雅、迅速的动效与交互 适配深色模式</li><li>✅ 可以通过插件内入口获取更多额度</li><li>✅ 与<code>超级剪贴板</code>插件集成，一次购买 多处使用</li></ul><hr><p><img src="'+c+'" alt="" loading="lazy"></p><p><img src="'+d+'" alt="" loading="lazy"></p><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/1Shq6mtU9tjhICvcawrp9Ug?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul>',8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","filePath":"project/SmartWordBreak/index.md","lastUpdated":1712666210000}'),m={name:"project/SmartWordBreak/index.md"},k=Object.assign(m,{setup(g){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(h,u)=>{const a=e("Title");return n(),l("div",null,[i(a,o(r(t)),null,16),_])}}});export{b as __pageData,k as default};

2
assets/project_SmartWordBreak_index.md.B8sIKCxn.lean.js → assets/project_SmartWordBreak_index.md.SWrNaNJj.lean.js
View File

@@ -1 +1 @@
import{E as e,c as l,J as i,aj as o,ak as r,ai as s,o as n}from"./chunks/framework.BFSS5Pox.js";const c="/assets/img1.CQpAFJeA.png",d="/assets/img2.DNfJmi3e.png",p="/assets/logo.DXjn29aa.png",_=s("",8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","filePath":"project/SmartWordBreak/index.md","lastUpdated":1712579063000}'),m={name:"project/SmartWordBreak/index.md"},k=Object.assign(m,{setup(g){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(h,u)=>{const a=e("Title");return n(),l("div",null,[i(a,o(r(t)),null,16),_])}}});export{b as __pageData,k as default};
import{E as e,c as l,J as i,aj as o,ak as r,ai as s,o as n}from"./chunks/framework.BFSS5Pox.js";const c="/assets/img1.CQpAFJeA.png",d="/assets/img2.DNfJmi3e.png",p="/assets/logo.DXjn29aa.png",_=s("",8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","filePath":"project/SmartWordBreak/index.md","lastUpdated":1712666210000}'),m={name:"project/SmartWordBreak/index.md"},k=Object.assign(m,{setup(g){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(h,u)=>{const a=e("Title");return n(),l("div",null,[i(a,o(r(t)),null,16),_])}}});export{b as __pageData,k as default};

2
assets/project_SmartWordBreak_log_index.md.yjz7ZH7t.js → assets/project_SmartWordBreak_log_index.md.DEJzP6qx.js
View File

@@ -1 +1 @@
import{_ as a,c as e,o as l,ai as t}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","filePath":"project/SmartWordBreak/log/index.md","lastUpdated":1712579063000}'),i={name:"project/SmartWordBreak/log/index.md"},o=t('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-0-5" tabindex="-1">v1.0.5 <a class="header-anchor" href="#v1-0-5" aria-label="Permalink to &quot;v1.0.5&quot;">​</a></h2><p><code>2022-12-17</code></p><ul><li>feat: 限免活动 每日免费额度调整为99 移除充值入口</li><li>fix: 修复历史记录显示问题</li></ul><h2 id="v1-0-4" tabindex="-1">v1.0.4 <a class="header-anchor" href="#v1-0-4" aria-label="Permalink to &quot;v1.0.4&quot;">​</a></h2><p><code>2022-09-25</code></p><ul><li>feat: 分词上限提高到了1000个字符</li><li>feat: token支持本地缓存</li></ul><h2 id="v1-0-3" tabindex="-1">v1.0.3 <a class="header-anchor" href="#v1-0-3" aria-label="Permalink to &quot;v1.0.3&quot;">​</a></h2><p><code>2022-09-19</code></p><ul><li>feat: 增加历史记录功能</li><li>fix: 移除了在tag外按下鼠标拖选的功能</li></ul><h2 id="v1-0-2" tabindex="-1">v1.0.2 <a class="header-anchor" href="#v1-0-2" aria-label="Permalink to &quot;v1.0.2&quot;">​</a></h2><p><code>2022-09-13</code></p><ul><li>feat: 支持跨段快速拖选</li><li>feat: 分词页添加了<code>搜索</code>与<code>粘贴</code>功能</li><li>feat: 优化换行符在分词页的表现 支持包含换行符拖选</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>2022-09-13</code></p><ul><li>feat: 增加了拖选过程中的动效</li><li>feat: 调整了按钮样式与颜色</li><li>fix: 移除了碍事的toast</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>2022-09-11</code></p><ul><li>release: v1.0.0发布</li></ul>',19),r=[o];function d(c,n,s,h,u,f){return l(),e("div",null,r)}const _=a(i,[["render",d]]);export{p as __pageData,_ as default};
import{_ as a,c as e,o as l,ai as t}from"./chunks/framework.BFSS5Pox.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","filePath":"project/SmartWordBreak/log/index.md","lastUpdated":1712666210000}'),i={name:"project/SmartWordBreak/log/index.md"},o=t('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to &quot;更新日志&quot;">​</a></h1><h2 id="v1-0-5" tabindex="-1">v1.0.5 <a class="header-anchor" href="#v1-0-5" aria-label="Permalink to &quot;v1.0.5&quot;">​</a></h2><p><code>2022-12-17</code></p><ul><li>feat: 限免活动 每日免费额度调整为99 移除充值入口</li><li>fix: 修复历史记录显示问题</li></ul><h2 id="v1-0-4" tabindex="-1">v1.0.4 <a class="header-anchor" href="#v1-0-4" aria-label="Permalink to &quot;v1.0.4&quot;">​</a></h2><p><code>2022-09-25</code></p><ul><li>feat: 分词上限提高到了1000个字符</li><li>feat: token支持本地缓存</li></ul><h2 id="v1-0-3" tabindex="-1">v1.0.3 <a class="header-anchor" href="#v1-0-3" aria-label="Permalink to &quot;v1.0.3&quot;">​</a></h2><p><code>2022-09-19</code></p><ul><li>feat: 增加历史记录功能</li><li>fix: 移除了在tag外按下鼠标拖选的功能</li></ul><h2 id="v1-0-2" tabindex="-1">v1.0.2 <a class="header-anchor" href="#v1-0-2" aria-label="Permalink to &quot;v1.0.2&quot;">​</a></h2><p><code>2022-09-13</code></p><ul><li>feat: 支持跨段快速拖选</li><li>feat: 分词页添加了<code>搜索</code>与<code>粘贴</code>功能</li><li>feat: 优化换行符在分词页的表现 支持包含换行符拖选</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>2022-09-13</code></p><ul><li>feat: 增加了拖选过程中的动效</li><li>feat: 调整了按钮样式与颜色</li><li>fix: 移除了碍事的toast</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>2022-09-11</code></p><ul><li>release: v1.0.0发布</li></ul>',19),r=[o];function d(c,n,s,h,u,f){return l(),e("div",null,r)}const _=a(i,[["render",d]]);export{p as __pageData,_ as default};

2
assets/project_SmartWordBreak_log_index.md.yjz7ZH7t.lean.js → assets/project_SmartWordBreak_log_index.md.DEJzP6qx.lean.js
View File

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

2
assets/project_SmartWordBreak_statement_index.md.C2uG-2fN.js → assets/project_SmartWordBreak_statement_index.md.Cg25OHHb.js
View File

@@ -1 +1 @@
import{_ as t,c as a,o as n,m as e,a as r}from"./chunks/framework.BFSS5Pox.js";const B=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","filePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1712579063000}'),s={name:"project/SmartWordBreak/statement/index.md"},l=e("h1",{id:"q-a",tabindex:"-1"},[r("Q&A "),e("a",{class:"header-anchor",href:"#q-a","aria-label":'Permalink to "Q&A"'},"​")],-1),o=e("ul",null,[e("li",null,"Q: 为什么要收费"),e("li",null,"A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置")],-1),d=e("hr",null,null,-1),i=e("ul",null,[e("li",null,"Q: 我支付了，但是没有收到额度"),e("li",null,"A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请通过论坛联系我，我会尽快核实并为你解决")],-1),c=[l,o,d,i];function _(m,p,u,h,f,x){return n(),a("div",null,c)}const A=t(s,[["render",_]]);export{B as __pageData,A as default};
import{_ as t,c as a,o as n,m as e,a as r}from"./chunks/framework.BFSS5Pox.js";const B=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","filePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1712666210000}'),s={name:"project/SmartWordBreak/statement/index.md"},l=e("h1",{id:"q-a",tabindex:"-1"},[r("Q&A "),e("a",{class:"header-anchor",href:"#q-a","aria-label":'Permalink to "Q&A"'},"​")],-1),o=e("ul",null,[e("li",null,"Q: 为什么要收费"),e("li",null,"A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置")],-1),d=e("hr",null,null,-1),i=e("ul",null,[e("li",null,"Q: 我支付了，但是没有收到额度"),e("li",null,"A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请通过论坛联系我，我会尽快核实并为你解决")],-1),c=[l,o,d,i];function _(m,p,u,h,f,x){return n(),a("div",null,c)}const A=t(s,[["render",_]]);export{B as __pageData,A as default};

2
assets/project_SmartWordBreak_statement_index.md.C2uG-2fN.lean.js → assets/project_SmartWordBreak_statement_index.md.Cg25OHHb.lean.js
View File

@@ -1 +1 @@
import{_ as t,c as a,o as n,m as e,a as r}from"./chunks/framework.BFSS5Pox.js";const B=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","filePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1712579063000}'),s={name:"project/SmartWordBreak/statement/index.md"},l=e("h1",{id:"q-a",tabindex:"-1"},[r("Q&A "),e("a",{class:"header-anchor",href:"#q-a","aria-label":'Permalink to "Q&A"'},"​")],-1),o=e("ul",null,[e("li",null,"Q: 为什么要收费"),e("li",null,"A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置")],-1),d=e("hr",null,null,-1),i=e("ul",null,[e("li",null,"Q: 我支付了，但是没有收到额度"),e("li",null,"A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请通过论坛联系我，我会尽快核实并为你解决")],-1),c=[l,o,d,i];function _(m,p,u,h,f,x){return n(),a("div",null,c)}const A=t(s,[["render",_]]);export{B as __pageData,A as default};
import{_ as t,c as a,o as n,m as e,a as r}from"./chunks/framework.BFSS5Pox.js";const B=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false,"sidebar":false,"aside":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","filePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1712666210000}'),s={name:"project/SmartWordBreak/statement/index.md"},l=e("h1",{id:"q-a",tabindex:"-1"},[r("Q&A "),e("a",{class:"header-anchor",href:"#q-a","aria-label":'Permalink to "Q&A"'},"​")],-1),o=e("ul",null,[e("li",null,"Q: 为什么要收费"),e("li",null,"A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置")],-1),d=e("hr",null,null,-1),i=e("ul",null,[e("li",null,"Q: 我支付了，但是没有收到额度"),e("li",null,"A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请通过论坛联系我，我会尽快核实并为你解决")],-1),c=[l,o,d,i];function _(m,p,u,h,f,x){return n(),a("div",null,c)}const A=t(s,[["render",_]]);export{B as __pageData,A as default};

2
assets/self_index.md.Bbepb4vB.js → assets/self_index.md.BGDzmPzl.js
View File

File diff suppressed because one or more lines are too long

2
assets/self_index.md.Bbepb4vB.lean.js → assets/self_index.md.BGDzmPzl.lean.js
View File

@@ -1 +1 @@
import{_ as e,c as o,o as a,ai as l,al as t}from"./chunks/framework.BFSS5Pox.js";const i="/assets/2.CKBECRxZ.png",s="/assets/1.21Xuo7kV.png",y=JSON.parse('{"title":"个人介绍","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"self/index.md","filePath":"self/index.md","lastUpdated":1712579063000}'),r={name:"self/index.md"},d=l("",35),c=[d];function g(h,p,n,m,u,f){return a(),o("div",null,c)}const q=e(r,[["render",g]]);export{y as __pageData,q as default};
import{_ as e,c as o,o as a,ai as l,al as t}from"./chunks/framework.BFSS5Pox.js";const i="/assets/2.CKBECRxZ.png",s="/assets/1.21Xuo7kV.png",y=JSON.parse('{"title":"个人介绍","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"self/index.md","filePath":"self/index.md","lastUpdated":1712666210000}'),r={name:"self/index.md"},d=l("",35),c=[d];function g(h,p,n,m,u,f){return a(),o("div",null,c)}const q=e(r,[["render",g]]);export{y as __pageData,q as default};

Some files were not shown because too many files have changed in this diff Show More