mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-17 23:19:55 +08:00
Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@c7c120ae1b 🚀
This commit is contained in:
ZiuChen
parent
8258883542
commit
20a3e2bdea
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1682528161000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to "【2023】青训营 - 前端练习题汇总解析""></a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to "选择题""></a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to "DAY 1""></a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1682586876000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l(`<h1 id="【2023】青训营-前端练习题汇总解析" tabindex="-1">【2023】青训营 - 前端练习题汇总解析 <a class="header-anchor" href="#【2023】青训营-前端练习题汇总解析" aria-label="Permalink to "【2023】青训营 - 前端练习题汇总解析""></a></h1><p>汇总了青训营官方账号每天发布的练习题，并且给出了答案、做了简单解析与知识扩充，有不足之处欢迎一起交流学习。</p><p>每天的选择题不同，而编程题是一样的，直接去Leetcode刷题即可。</p><h2 id="选择题" tabindex="-1">选择题 <a class="header-anchor" href="#选择题" aria-label="Permalink to "选择题""></a></h2><h3 id="day-1" tabindex="-1">DAY 1 <a class="header-anchor" href="#day-1" aria-label="Permalink to "DAY 1""></a></h3><h4 id="题目描述" tabindex="-1">题目描述 <a class="header-anchor" href="#题目描述" aria-label="Permalink to "题目描述""></a></h4><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">选择题 1： </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">下列哪些是 HTML5 的新特性？ </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">A. 语义标签 </span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">B. Canvas 绘图 </span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1682528161000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const d=JSON.parse('{"title":"【2023】青训营 - 前端练习题汇总解析","description":"","frontmatter":{},"headers":[],"relativePath":"article/【2023】青训营 - 前端练习题汇总解析.md","lastUpdated":1682586876000}'),p={name:"article/【2023】青训营 - 前端练习题汇总解析.md"},e=l("",150),o=[e];function r(c,t,i,y,C,b){return n(),a("div",null,o)}const A=s(p,[["render",r]]);export{d as __pageData,A as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1682528161000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to "【字节跳动】前端面试题总结""></a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to "看代码说结果""></a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to "代码输出结果1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to "代码输出结果2""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1682586876000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l(`<h1 id="【字节跳动】前端面试题总结" tabindex="-1">【字节跳动】前端面试题总结 <a class="header-anchor" href="#【字节跳动】前端面试题总结" aria-label="Permalink to "【字节跳动】前端面试题总结""></a></h1><h2 id="看代码说结果" tabindex="-1">看代码说结果 <a class="header-anchor" href="#看代码说结果" aria-label="Permalink to "看代码说结果""></a></h2><h3 id="代码输出结果1" tabindex="-1">代码输出结果1 <a class="header-anchor" href="#代码输出结果1" aria-label="Permalink to "代码输出结果1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(parseInt))</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[1, NaN, NaN]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果2" tabindex="-1">代码输出结果2 <a class="header-anchor" href="#代码输出结果2" aria-label="Permalink to "代码输出结果2""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1 undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="代码输出结果3" tabindex="-1">代码输出结果3 <a class="header-anchor" href="#代码输出结果3" aria-label="Permalink to "代码输出结果3""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">()</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">()</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1682528161000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【字节跳动】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【字节跳动】前端面试题总结.md","lastUpdated":1682586876000}'),p={name:"article/【字节跳动】前端面试题总结.md"},o=l("",36),e=[o];function r(c,t,y,D,i,C){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1682528161000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l(`<h1 id="【快手】深入理解前端面试题" tabindex="-1">【快手】深入理解前端面试题 <a class="header-anchor" href="#【快手】深入理解前端面试题" aria-label="Permalink to "【快手】深入理解前端面试题""></a></h1><h2 id="快手一面" tabindex="-1">快手一面 <a class="header-anchor" href="#快手一面" aria-label="Permalink to "快手一面""></a></h2><h3 id="vue生命周期" tabindex="-1">Vue生命周期 <a class="header-anchor" href="#vue生命周期" aria-label="Permalink to "Vue生命周期""></a></h3><p><code>beforeCreate created beforeMount mounted</code></p><p><code>beforeUpdate updated</code></p><p><code>beforeDestory destoryed</code></p><p>Vue3移除了<code>beforeCreate</code> <code>created</code>两个声明周期钩子，这是因为setup发生在开始创建组件之前，在<code>beforeCreate</code>和<code>created</code>之前执行</p><p>可以在setup中使用的生命周期函数：<code>onMounted</code> <code>onUpdated</code> <code>onUnmounted</code> <code>onBeforeUpdate</code>这几个，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a299bd2229fb45d68a1cdd8731c94449~tplv-k3u1fbpfcp-zoom-1.image" alt="Vue 生命周期"></p><h3 id="网络请求一般在什么时候发起-为什么" tabindex="-1">网络请求一般在什么时候发起，为什么 <a class="header-anchor" href="#网络请求一般在什么时候发起-为什么" aria-label="Permalink to "网络请求一般在什么时候发起，为什么""></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 "setup的执行时机相当于哪个生命周期""></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 "Vue2和Vue3的响应式原理""></a></h3><h4 id="vue2响应式原理" tabindex="-1">Vue2响应式原理 <a class="header-anchor" href="#vue2响应式原理" aria-label="Permalink to "Vue2响应式原理""></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 "Vue3响应式原理""></a></h4><p><code>ref</code>使用的是<code>Object.defineProperty()</code>，而<code>reactive</code>使用的是<code>Proxy</code></p><p><code>Proxy</code>可以直接深度代理一个对象，通过设置handler中的捕获器可以对对象创建一个代理，将各种行为监听并且同步到对象本身上</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1682586876000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l(`<h1 id="【快手】深入理解前端面试题" tabindex="-1">【快手】深入理解前端面试题 <a class="header-anchor" href="#【快手】深入理解前端面试题" aria-label="Permalink to "【快手】深入理解前端面试题""></a></h1><h2 id="快手一面" tabindex="-1">快手一面 <a class="header-anchor" href="#快手一面" aria-label="Permalink to "快手一面""></a></h2><h3 id="vue生命周期" tabindex="-1">Vue生命周期 <a class="header-anchor" href="#vue生命周期" aria-label="Permalink to "Vue生命周期""></a></h3><p><code>beforeCreate created beforeMount mounted</code></p><p><code>beforeUpdate updated</code></p><p><code>beforeDestory destoryed</code></p><p>Vue3移除了<code>beforeCreate</code> <code>created</code>两个声明周期钩子，这是因为setup发生在开始创建组件之前，在<code>beforeCreate</code>和<code>created</code>之前执行</p><p>可以在setup中使用的生命周期函数：<code>onMounted</code> <code>onUpdated</code> <code>onUnmounted</code> <code>onBeforeUpdate</code>这几个，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a299bd2229fb45d68a1cdd8731c94449~tplv-k3u1fbpfcp-zoom-1.image" alt="Vue 生命周期"></p><h3 id="网络请求一般在什么时候发起-为什么" tabindex="-1">网络请求一般在什么时候发起，为什么 <a class="header-anchor" href="#网络请求一般在什么时候发起-为什么" aria-label="Permalink to "网络请求一般在什么时候发起，为什么""></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 "setup的执行时机相当于哪个生命周期""></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 "Vue2和Vue3的响应式原理""></a></h3><h4 id="vue2响应式原理" tabindex="-1">Vue2响应式原理 <a class="header-anchor" href="#vue2响应式原理" aria-label="Permalink to "Vue2响应式原理""></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 "Vue3响应式原理""></a></h4><p><code>ref</code>使用的是<code>Object.defineProperty()</code>，而<code>reactive</code>使用的是<code>Proxy</code></p><p><code>Proxy</code>可以直接深度代理一个对象，通过设置handler中的捕获器可以对对象创建一个代理，将各种行为监听并且同步到对象本身上</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1682528161000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function r(t,c,y,F,i,D){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【快手】深入理解前端面试题","description":"","frontmatter":{},"headers":[],"relativePath":"article/【快手】深入理解前端面试题.md","lastUpdated":1682586876000}'),p={name:"article/【快手】深入理解前端面试题.md"},o=l("",87),e=[o];function r(t,c,y,F,i,D){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1682528161000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to "【用友金融】前端面试题总结""></a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></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 "CSS属性""></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 "函数执行结果""></a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to "题目1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1682586876000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l(`<h1 id="【用友金融】前端面试题总结" tabindex="-1">【用友金融】前端面试题总结 <a class="header-anchor" href="#【用友金融】前端面试题总结" aria-label="Permalink to "【用友金融】前端面试题总结""></a></h1><h2 id="回流与重绘" tabindex="-1">回流与重绘 <a class="header-anchor" href="#回流与重绘" aria-label="Permalink to "回流与重绘""></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 "CSS属性""></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 "函数执行结果""></a></h2><h3 id="题目1" tabindex="-1">题目1 <a class="header-anchor" href="#题目1" aria-label="Permalink to "题目1""></a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1682528161000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l("",71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"【用友金融】前端面试题总结","description":"","frontmatter":{},"headers":[],"relativePath":"article/【用友金融】前端面试题总结.md","lastUpdated":1682586876000}'),e={name:"article/【用友金融】前端面试题总结.md"},p=l("",71),o=[p];function r(c,t,i,y,C,D){return a(),n("div",null,o)}const F=s(e,[["render",r]]);export{A as __pageData,F as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1682528161000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to "一文读懂事件冒泡与事件捕获""></a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to "💡 从例子入手""></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><video></code> 标签被 <code><div></code> 包裹，<code><div></code> 与 <code><video></code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code><video></code> 时播放视频，点击 <code><div></code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to "🤔 什么是事件冒泡机制？事件捕获又是什么？""></a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code><html></code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code><html></code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code><html></code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code><video></code> 点击事件触发后，虽然我们没有主动触发 <code><div></code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code><div></code> 上，并触发了绑定在其上的监听回调函数，将 <code><video></code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to "📌 用例子验证结论""></a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 click div1</span></span>
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1682586876000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-label="Permalink to "一文读懂事件冒泡与事件捕获""></a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-label="Permalink to "💡 从例子入手""></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><video></code> 标签被 <code><div></code> 包裹，<code><div></code> 与 <code><video></code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code><video></code> 时播放视频，点击 <code><div></code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-label="Permalink to "🤔 什么是事件冒泡机制？事件捕获又是什么？""></a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code><html></code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code><html></code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code><html></code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code><video></code> 点击事件触发后，虽然我们没有主动触发 <code><div></code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code><div></code> 上，并触发了绑定在其上的监听回调函数，将 <code><video></code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-label="Permalink to "📌 用例子验证结论""></a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 click div1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div3</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div3</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1682528161000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l("",63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1682586876000}'),e={name:"article/一文读懂事件冒泡与事件捕获.md"},o=l("",63),p=[o];function t(r,c,i,d,D,y){return a(),n("div",null,p)}const C=s(e,[["render",t]]);export{u as __pageData,C as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1682528161000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to "一文读懂伪类与伪元素""></a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to "🔰 什么是伪类？""></a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to "典型的伪类关键字""></a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to "\`:hover\`""></a></h4><p>指针在 <code><button></code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">button</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1682586876000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l(`<h1 id="一文读懂伪类与伪元素" tabindex="-1">一文读懂伪类与伪元素 <a class="header-anchor" href="#一文读懂伪类与伪元素" aria-label="Permalink to "一文读懂伪类与伪元素""></a></h1><h2 id="🔰-什么是伪类" tabindex="-1">🔰 什么是伪类？ <a class="header-anchor" href="#🔰-什么是伪类" aria-label="Permalink to "🔰 什么是伪类？""></a></h2><p>伪类是添加到选择器的 <strong>关键字</strong> ，指定要选择的元素的特殊状态。</p><h3 id="典型的伪类关键字" tabindex="-1">典型的伪类关键字 <a class="header-anchor" href="#典型的伪类关键字" aria-label="Permalink to "典型的伪类关键字""></a></h3><p>在大多数情况下，<strong>伪类都与基础选择器搭配使用</strong>，下述是伪类在一些典型场景下的应用。</p><h4 id="hover" tabindex="-1"><code>:hover</code> <a class="header-anchor" href="#hover" aria-label="Permalink to "\`:hover\`""></a></h4><p>指针在 <code><button></code> 上悬停，但没有激活它时，按钮颜色变为蓝色</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">button</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">hover</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</p></blockquote><h4 id="not" tabindex="-1"><code>:not</code> <a class="header-anchor" href="#not" aria-label="Permalink to "\`:not\`""></a></h4><p><strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p><p>将所有不是<code><p></code>的元素颜色改为蓝色：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">body</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">not</span><span style="color:#89DDFF;">(</span><span style="color:#FFCB6B;">p</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue</span><span style="color:#89DDFF;">;</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1682528161000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l("",56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const d=s(p,[["render",c]]);export{b as __pageData,d as default};
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"一文读懂伪类与伪元素","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂伪类与伪元素.md","lastUpdated":1682586876000}'),p={name:"article/一文读懂伪类与伪元素.md"},e=l("",56),o=[e];function c(r,t,i,D,y,C){return a(),n("div",null,o)}const d=s(p,[["render",c]]);export{b as __pageData,d as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1682528161000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to "一文读懂函数中this指向问题""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1682586876000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l(`<h1 id="一文读懂函数中this指向问题" tabindex="-1">一文读懂函数中this指向问题 <a class="header-anchor" href="#一文读懂函数中this指向问题" aria-label="Permalink to "一文读懂函数中this指向问题""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 定义一个函数</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">function foo() {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console.log(this)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1682528161000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l("",59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const A=JSON.parse('{"title":"一文读懂函数中this指向问题","description":"","frontmatter":{},"headers":[],"relativePath":"article/一文读懂函数中this指向问题.md","lastUpdated":1682586876000}'),e={name:"article/一文读懂函数中this指向问题.md"},p=l("",59),o=[p];function c(r,i,t,b,u,C){return n(),a("div",null,o)}const m=s(e,[["render",c]]);export{A as __pageData,m as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1682528161000}'),p={name:"article/从0实现一个年度报告.md"},o=l(`<h1 id="从0实现一个年度报告" tabindex="-1">从0实现一个年度报告 <a class="header-anchor" href="#从0实现一个年度报告" aria-label="Permalink to "从0实现一个年度报告""></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 "实现难点""></a></h2><h3 id="_1-数据模拟" tabindex="-1">1. 数据模拟 <a class="header-anchor" href="#_1-数据模拟" aria-label="Permalink to "1. 数据模拟""></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 "2. 屏幕适配""></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 "3. 动画效果""></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 "4. 音乐播放""></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 "用户数据""></a></h2><h3 id="用户数据内容" tabindex="-1">用户数据内容 <a class="header-anchor" href="#用户数据内容" aria-label="Permalink to "用户数据内容""></a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 用户名</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1682586876000}'),p={name:"article/从0实现一个年度报告.md"},o=l(`<h1 id="从0实现一个年度报告" tabindex="-1">从0实现一个年度报告 <a class="header-anchor" href="#从0实现一个年度报告" aria-label="Permalink to "从0实现一个年度报告""></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 "实现难点""></a></h2><h3 id="_1-数据模拟" tabindex="-1">1. 数据模拟 <a class="header-anchor" href="#_1-数据模拟" aria-label="Permalink to "1. 数据模拟""></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 "2. 屏幕适配""></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 "3. 动画效果""></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 "4. 音乐播放""></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 "用户数据""></a></h2><h3 id="用户数据内容" tabindex="-1">用户数据内容 <a class="header-anchor" href="#用户数据内容" aria-label="Permalink to "用户数据内容""></a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 用户名</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">- 注册时间 距今天数</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">- 创作相关</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> - 发布文章数</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1682528161000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const A=s(p,[["render",t]]);export{u as __pageData,A as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"从0实现一个年度报告","description":"","frontmatter":{},"headers":[],"relativePath":"article/从0实现一个年度报告.md","lastUpdated":1682586876000}'),p={name:"article/从0实现一个年度报告.md"},o=l("",59),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const A=s(p,[["render",t]]);export{u as __pageData,A as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1682528161000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to "彻底搞懂对象的数据属性描述符、存储属性描述符""></a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to "属性描述符""></a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1682586876000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l(`<h1 id="彻底搞懂对象的数据属性描述符、存储属性描述符" tabindex="-1">彻底搞懂对象的数据属性描述符、存储属性描述符 <a class="header-anchor" href="#彻底搞懂对象的数据属性描述符、存储属性描述符" aria-label="Permalink to "彻底搞懂对象的数据属性描述符、存储属性描述符""></a></h1><h2 id="属性描述符" tabindex="-1">属性描述符 <a class="header-anchor" href="#属性描述符" aria-label="Permalink to "属性描述符""></a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1682528161000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"彻底搞懂对象的数据属性描述符、存储属性描述符","description":"","frontmatter":{},"headers":[],"relativePath":"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md","lastUpdated":1682586876000}'),p={name:"article/彻底搞懂对象的数据属性描述符、存储属性描述符.md"},o=l("",18),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1682528161000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to "浅析defineProperty与Proxy实现的双向绑定""></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 "🔰 Vue2的响应式原理""></a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1682586876000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l(`<h1 id="浅析defineproperty与proxy实现的双向绑定" tabindex="-1">浅析defineProperty与Proxy实现的双向绑定 <a class="header-anchor" href="#浅析defineproperty与proxy实现的双向绑定" aria-label="Permalink to "浅析defineProperty与Proxy实现的双向绑定""></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 "🔰 Vue2的响应式原理""></a></h2><p><img src="https://v2.cn.vuejs.org/images/data.png" alt="image.png"></p><blockquote><p>当你把一个普通的 JavaScript 对象传入 Vue 实例作为 <code>data</code> 选项，Vue 将遍历此对象所有的 property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noreferrer"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters" target="_blank" rel="noreferrer">getter/setter</a>。</p><p>每个组件实例都对应一个 <strong>watcher</strong> 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p></blockquote><p>Vue2的响应式原理，利用的是 <code>Object.defineProperty()</code> 的 <code>setter</code> 属性：</p><p><code>defineProperty()</code> 方法用于<strong>精确</strong>定义一个对象的属性，能够指定属性的各种特征，其中的 <code>set</code> 属性能够为对象指定一个 <code>setter</code> 函数，每次该属性的值发生修改，就会调用此函数。</p><blockquote><p>更多可以配置的属性请参看：<a href="https://juejin.cn/post/7088335075061792782" target="_blank" rel="noreferrer">什么是对象的数据属性描述符？存储属性描述符？</a></p></blockquote><p>这也是Vue2实现响应式数据、数据双向绑定的原理。</p><p>可以使用此方法实现一个简单的数据双向绑定的Demo：</p><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f241135dbeb04e829fe6897c2e418aa2~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p><ul><li>输入框内的内容改变，<code>.vBox</code> 展示的文本会随之改变。</li><li>点击按钮修改 <code>vm.text</code>，输入框内的值和 <code>.vBox</code> 的文本都会发生改变。</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vm</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">='</span><span style="color:#C3E88D;">Hello, World.</span><span style="color:#89DDFF;">'"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Modify vm.text</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vBox</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1682528161000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l("",20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const C=JSON.parse('{"title":"浅析defineProperty与Proxy实现的双向绑定","description":"","frontmatter":{},"headers":[],"relativePath":"article/浅析defineProperty与Proxy实现的双向绑定.md","lastUpdated":1682586876000}'),e={name:"article/浅析defineProperty与Proxy实现的双向绑定.md"},p=l("",20),o=[p];function t(r,c,y,D,F,i){return n(),a("div",null,o)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1682528161000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to "深入JavaScript数据类型""></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 "typeof运算符""></a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>'object'</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1682586876000}'),p={name:"article/深入JavaScript数据类型.md"},e=l(`<h2 id="深入javascript数据类型" tabindex="-1">深入JavaScript数据类型 <a class="header-anchor" href="#深入javascript数据类型" aria-label="Permalink to "深入JavaScript数据类型""></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 "typeof运算符""></a></h2><p>除了null，所有<strong>原始类型</strong>都可以通过<code>typeof</code>运算符得到不同的结果</p><p>而null与object通过<code>typeof</code>运算符得到的结果都为<code>'object'</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 除了 null 其他原始类型的变量都可以通过 typeof 得到其类型</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 而 null 与 object 通过 typeof 运算得到的都是 'object'</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> targets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">]</span></span>
|
||||
<span class="line"></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1682528161000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const o="/assets/Object.prototype.toString.70e8308c.png",d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入JavaScript数据类型.md","lastUpdated":1682586876000}'),p={name:"article/深入JavaScript数据类型.md"},e=l("",46),t=[e];function c(r,i,y,D,A,F){return n(),a("div",null,t)}const b=s(p,[["render",c]]);export{d as __pageData,b as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1682528161000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to "深入Vue3源码，看看Vue.use后究竟发生了什么？""></a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to "从全局注册组件库入手""></a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1682586876000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l(`<h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to "深入Vue3源码，看看Vue.use后究竟发生了什么？""></a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to "从全局注册组件库入手""></a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> CustomInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/component/CustomInput.vue</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1682528161000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l("",26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"深入Vue3源码，看看Vue.use后究竟发生了什么？","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md","lastUpdated":1682586876000}'),p={name:"article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md"},e=l("",26),o=[e];function t(c,r,y,i,F,D){return n(),a("div",null,o)}const C=s(p,[["render",t]]);export{u as __pageData,C as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1682528161000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to "深入理解Proxy与Reflect""></a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to "监听对象的操作""></a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1682586876000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l(`<h1 id="深入理解proxy与reflect" tabindex="-1">深入理解Proxy与Reflect <a class="header-anchor" href="#深入理解proxy与reflect" aria-label="Permalink to "深入理解Proxy与Reflect""></a></h1><h3 id="监听对象的操作" tabindex="-1">监听对象的操作 <a class="header-anchor" href="#监听对象的操作" aria-label="Permalink to "监听对象的操作""></a></h3><p>可以使用Proxy对象将原对象包裹，此后的操作都对<code>proxy</code>进行，每次<code>get</code>与<code>set</code>被触发时都会自动执行相应代码</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.88</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1682528161000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const i=JSON.parse('{"title":"深入理解Proxy与Reflect","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解Proxy与Reflect.md","lastUpdated":1682586876000}'),p={name:"article/深入理解Proxy与Reflect.md"},o=l("",44),e=[o];function c(t,r,y,D,F,A){return n(),a("div",null,e)}const b=s(p,[["render",c]]);export{i as __pageData,b as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as s,R as o}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1682528161000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),c=[n];function t(i,r,p,d,h,u){return a(),s("div",null,c)}const C=e(l,[["render",t]]);export{b as __pageData,C as default};
|
||||
import{_ as e,o as a,c as s,R as o}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"深入理解浏览器缓存机制","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器缓存机制.md","lastUpdated":1682586876000}'),l={name:"article/深入理解浏览器缓存机制.md"},n=o("",66),c=[n];function t(i,r,p,d,h,u){return a(),s("div",null,c)}const C=e(l,[["render",t]]);export{b as __pageData,C as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as e}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","lastUpdated":1682528161000}'),l={name:"article/深入理解浏览器运行原理.md"},p=e("",87),i=[p];function r(o,c,t,d,b,u){return a(),n("div",null,i)}const C=s(l,[["render",r]]);export{h as __pageData,C as default};
|
||||
import{_ as s,o as a,c as n,R as e}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"深入理解浏览器运行原理","description":"","frontmatter":{},"headers":[],"relativePath":"article/深入理解浏览器运行原理.md","lastUpdated":1682586876000}'),l={name:"article/深入理解浏览器运行原理.md"},p=e("",87),i=[p];function r(o,c,t,d,b,u){return a(),n("div",null,i)}const C=s(l,[["render",r]]);export{h as __pageData,C as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.a304f0f7.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","lastUpdated":1682528161000}'),n={name:"index.md"};function a(r,o,s,l,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.a304f0f7.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","lastUpdated":1682586876000}'),n={name:"index.md"};function a(r,o,s,l,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.a304f0f7.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","lastUpdated":1682528161000}'),n={name:"index.md"};function a(r,o,s,l,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
import{_ as e,o as t,c as i}from"./chunks/framework.a304f0f7.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","lastUpdated":1682586876000}'),n={name:"index.md"};function a(r,o,s,l,d,c){return t(),i("div")}const u=e(n,[["render",a]]);export{m as __pageData,u as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1682528161000}'),t={name:"note/CSS.md"},r=l(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to "CSS基础""></a></h1><p>CSS提供了三种方法，可以将CSS样式应用到元素上：</p><ul><li>内联样式 <ul><li>直接将样式写到元素的<code>style</code>属性上</li></ul></li><li>内部样式表 <ul><li>将样式通过<code><style></code>标签写在<code><head></code>标签中，通过选择器应用到元素上</li></ul></li><li>外部样式表 <ul><li>将样式写在外部文件如<code>style.css</code>中，再通过<code><link></code>标签引入</li></ul></li></ul><h2 id="文本样式-text" tabindex="-1">文本样式(text) <a class="header-anchor" href="#文本样式-text" aria-label="Permalink to "文本样式(text)""></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 "text-align（重要）""></a></h3><p>行内内容（例如文字）如何相对它的块父元素对齐，<code>left</code>靠左 <code>center</code>居中 <code>right</code>靠右 <code>justify</code>两端对齐</p><p>默认值为<code>left</code></p><p>需要注意的是，当子元素是<code>div</code>时，对父元素设置<code>text-align</code>是不生效的：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1682586876000}'),t={name:"note/CSS.md"},r=l(`<h1 id="css基础" tabindex="-1">CSS基础 <a class="header-anchor" href="#css基础" aria-label="Permalink to "CSS基础""></a></h1><p>CSS提供了三种方法，可以将CSS样式应用到元素上：</p><ul><li>内联样式 <ul><li>直接将样式写到元素的<code>style</code>属性上</li></ul></li><li>内部样式表 <ul><li>将样式通过<code><style></code>标签写在<code><head></code>标签中，通过选择器应用到元素上</li></ul></li><li>外部样式表 <ul><li>将样式写在外部文件如<code>style.css</code>中，再通过<code><link></code>标签引入</li></ul></li></ul><h2 id="文本样式-text" tabindex="-1">文本样式(text) <a class="header-anchor" href="#文本样式-text" aria-label="Permalink to "文本样式(text)""></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 "text-align（重要）""></a></h3><p>行内内容（例如文字）如何相对它的块父元素对齐，<code>left</code>靠左 <code>center</code>居中 <code>right</code>靠右 <code>justify</code>两端对齐</p><p>默认值为<code>left</code></p><p>需要注意的是，当子元素是<code>div</code>时，对父元素设置<code>text-align</code>是不生效的：</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">box</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">500px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1682528161000}'),t={name:"note/CSS.md"},r=l("",535),i=[r];function D(d,y,F,C,u,b){return a(),n("div",null,i)}const A=s(t,[["render",D]]);export{h as __pageData,A as default};
|
||||
import{_ as s,o as a,c as n,R as l}from"./chunks/framework.a304f0f7.js";const e="/assets/BFC-1.ed3fcfd0.jpg",o="/assets/BFC-2.3c4a8bbc.jpg",p="/assets/BFC-3.7daed619.jpg",c="/assets/BFC-4.b58515a7.jpg",h=JSON.parse('{"title":"CSS基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/CSS.md","lastUpdated":1682586876000}'),t={name:"note/CSS.md"},r=l("",535),i=[r];function D(d,y,F,C,u,b){return a(),n("div",null,i)}const A=s(t,[["render",D]]);export{h as __pageData,A as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const F=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","lastUpdated":1682528161000}'),o={name:"note/Front-end Engineering.md"},e=l("",254),p=[e];function c(r,t,i,d,y,D){return n(),a("div",null,p)}const u=s(o,[["render",c]]);export{F as __pageData,u as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const F=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[],"relativePath":"note/Front-end Engineering.md","lastUpdated":1682586876000}'),o={name:"note/Front-end Engineering.md"},e=l("",254),p=[e];function c(r,t,i,d,y,D){return n(),a("div",null,p)}const u=s(o,[["render",c]]);export{F as __pageData,u as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1682528161000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
|
||||
import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1682586876000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1682528161000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
|
||||
import{_ as t,o as e,c as r,z as a,a as c}from"./chunks/framework.a304f0f7.js";const S=JSON.parse('{"title":"JavaScript 基础","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScript.md","lastUpdated":1682586876000}'),s={name:"note/JavaScript.md"},i=a("h1",{id:"javascript-基础",tabindex:"-1"},[c("JavaScript 基础 "),a("a",{class:"header-anchor",href:"#javascript-基础","aria-label":'Permalink to "JavaScript 基础"'},"")],-1),n=a("p",null,"JavaScript 组成",-1),o=a("ul",null,[a("li",null,"ECMAScript 定义语言规范"),a("li",null,"DOM 用于操作文档的API"),a("li",null,"BOM 用于操作浏览器的API")],-1),l=[i,n,o];function p(d,_,h,u,v,f){return e(),r("div",null,l)}const J=t(s,[["render",p]]);export{S as __pageData,J as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1682528161000}'),F={name:"note/JavaScriptEnhanced.md"},D=l(`<h1 id="javascript-高级教程" tabindex="-1">JavaScript 高级教程 <a class="header-anchor" href="#javascript-高级教程" aria-label="Permalink to "JavaScript 高级教程""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 定义一个函数</span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1682586876000}'),F={name:"note/JavaScriptEnhanced.md"},D=l(`<h1 id="javascript-高级教程" tabindex="-1">JavaScript 高级教程 <a class="header-anchor" href="#javascript-高级教程" aria-label="Permalink to "JavaScript 高级教程""></a></h1><h2 id="函数中this指向" tabindex="-1">函数中this指向 <a class="header-anchor" href="#函数中this指向" aria-label="Permalink to "函数中this指向""></a></h2><p>函数在调用时, Javascript会默认为this绑定一个值</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 定义一个函数</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1682528161000}'),F={name:"note/JavaScriptEnhanced.md"},D=l("",668),i=[D];function A(C,b,u,d,m,h){return n(),a("div",null,i)}const E=s(F,[["render",A]]);export{g as __pageData,E as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/image-20221118222207332-16687813334481.64935e06.png",o="/assets/image-20221118222311200-16687813941873.8c07f79f.png",e="/assets/image-20221122103111654.29f48e34.png",c="/assets/image-20221122103256116.b7d76f81.png",r="/assets/image-20221122103715428.587185d1.png",t="/assets/image-20221125090752249.baeedc2b.png",y="/assets/image-20221125094148365.3adfbe2d.png",g=JSON.parse('{"title":"JavaScript 高级教程","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"note/JavaScriptEnhanced.md","lastUpdated":1682586876000}'),F={name:"note/JavaScriptEnhanced.md"},D=l("",668),i=[D];function A(C,b,u,d,m,h){return n(),a("div",null,i)}const E=s(F,[["render",A]]);export{g as __pageData,E as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as l,R as n}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"MySQL","description":"","frontmatter":{},"headers":[],"relativePath":"note/MySQL.md","lastUpdated":1682528161000}'),e={name:"note/MySQL.md"},t=n("",71),p=[t];function o(r,c,C,y,i,d){return a(),l("div",null,p)}const F=s(e,[["render",o]]);export{D as __pageData,F as default};
|
||||
import{_ as s,o as a,c as l,R as n}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"MySQL","description":"","frontmatter":{},"headers":[],"relativePath":"note/MySQL.md","lastUpdated":1682586876000}'),e={name:"note/MySQL.md"},t=n("",71),p=[t];function o(r,c,C,y,i,d){return a(),l("div",null,p)}const F=s(e,[["render",o]]);export{D as __pageData,F as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",e="/assets/redux-usage.7df84df8.svg",t="/assets/redux-async-action.0dc40e11.svg",d=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682528161000}'),c={name:"note/React.md"},r=l(`<h1 id="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-label="Permalink to "React""></a></h1><h2 id="邂逅react" tabindex="-1">邂逅React <a class="header-anchor" href="#邂逅react" aria-label="Permalink to "邂逅React""></a></h2><h3 id="react开发依赖" tabindex="-1">React开发依赖 <a class="header-anchor" href="#react开发依赖" aria-label="Permalink to "React开发依赖""></a></h3><ul><li><code>react</code> 包含React的核心代码</li><li><code>react-dom</code> 将React渲染到不同平台需要的核心代码</li><li><code>babel</code> 将JSX转换成React代码的工具</li></ul><p>为什么要拆分成这么多的包？</p><ul><li>不同的库各司其职，让库变得纯粹</li><li><code>react</code>包中包含了 React Web 和 React Native 共同拥有的<strong>核心代码</strong></li><li><code>react-dom</code> 针对Web和Native完成的事情不同 <ul><li>Web端：<code>react-dom</code>会将JSX渲染成真实DOM，展示在浏览器中</li><li>Native端：<code>react-dom</code>会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）</li></ul></li></ul><h3 id="babel与react的关系" tabindex="-1">Babel与React的关系 <a class="header-anchor" href="#babel与react的关系" aria-label="Permalink to "Babel与React的关系""></a></h3><p>Babel是什么？</p><ul><li>Babel又名Babel.js</li><li>是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）</li><li>提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法</li></ul><p>二者之间的联系</p><ul><li>默认情况下React开发可以不使用Babel</li><li>但是我们不可能使用React.createElement来编写代码</li><li>通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement</li></ul><h3 id="react初体验" tabindex="-1">React初体验 <a class="header-anchor" href="#react初体验" aria-label="Permalink to "React初体验""></a></h3><p>我们通过CDN方式引入react、react-dom、babel这三个依赖</p><p>并且创建<code>#root</code>根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",e="/assets/redux-usage.7df84df8.svg",t="/assets/redux-async-action.0dc40e11.svg",d=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682586876000}'),c={name:"note/React.md"},r=l(`<h1 id="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-label="Permalink to "React""></a></h1><h2 id="邂逅react" tabindex="-1">邂逅React <a class="header-anchor" href="#邂逅react" aria-label="Permalink to "邂逅React""></a></h2><h3 id="react开发依赖" tabindex="-1">React开发依赖 <a class="header-anchor" href="#react开发依赖" aria-label="Permalink to "React开发依赖""></a></h3><ul><li><code>react</code> 包含React的核心代码</li><li><code>react-dom</code> 将React渲染到不同平台需要的核心代码</li><li><code>babel</code> 将JSX转换成React代码的工具</li></ul><p>为什么要拆分成这么多的包？</p><ul><li>不同的库各司其职，让库变得纯粹</li><li><code>react</code>包中包含了 React Web 和 React Native 共同拥有的<strong>核心代码</strong></li><li><code>react-dom</code> 针对Web和Native完成的事情不同 <ul><li>Web端：<code>react-dom</code>会将JSX渲染成真实DOM，展示在浏览器中</li><li>Native端：<code>react-dom</code>会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）</li></ul></li></ul><h3 id="babel与react的关系" tabindex="-1">Babel与React的关系 <a class="header-anchor" href="#babel与react的关系" aria-label="Permalink to "Babel与React的关系""></a></h3><p>Babel是什么？</p><ul><li>Babel又名Babel.js</li><li>是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）</li><li>提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法</li></ul><p>二者之间的联系</p><ul><li>默认情况下React开发可以不使用Babel</li><li>但是我们不可能使用React.createElement来编写代码</li><li>通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement</li></ul><h3 id="react初体验" tabindex="-1">React初体验 <a class="header-anchor" href="#react初体验" aria-label="Permalink to "React初体验""></a></h3><p>我们通过CDN方式引入react、react-dom、babel这三个依赖</p><p>并且创建<code>#root</code>根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://unpkg.com/react@18/umd/react.development.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://unpkg.com/react-dom@18/umd/react-dom.development.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://unpkg.com/babel-standalone@6/babel.min.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
@ -1024,7 +1024,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to "Context跨组件传参""></a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to "用Context实现跨组件传参""></a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-CCfpC" id="tab-rddFE47" checked="checked"><label for="tab-rddFE47">context.js</label><input type="radio" name="group-CCfpC" id="tab-zI1JEI_"><label for="tab-zI1JEI_">App.jsx</label><input type="radio" name="group-CCfpC" id="tab-ubvkFkX"><label for="tab-ubvkFkX">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to "Context跨组件传参""></a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to "用Context实现跨组件传参""></a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-wxHFC" id="tab-ZpqIb5j" checked="checked"><label for="tab-ZpqIb5j">context.js</label><input type="radio" name="group-wxHFC" id="tab-50_5KCk"><label for="tab-50_5KCk">App.jsx</label><input type="radio" name="group-wxHFC" id="tab-ryQ3qSa"><label for="tab-ryQ3qSa">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// context.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createContext</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> DarkModeContext </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createContext</span><span style="color:#A6ACCD;">()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
|
||||
@ -2159,7 +2159,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> className </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">(classNameMap)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">!!</span><span style="color:#A6ACCD;">item[</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> item[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">''</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">join</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><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>手动编写动态绑定的className较为繁琐，可以依靠第三方库<code>classnames</code>帮我们完成（Vue已将类似的功能内置）</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">classnames</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Usage Sample:</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">classNames</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">classNames</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">bar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">classNames</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to "Redux""></a></h2><ul><li>Redux的核心思想</li><li>Redux的基本使用</li><li>React结合Redux</li><li>Redux的异步操作</li><li>redux-devtool</li><li>reducer的模块拆分</li></ul><h3 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to "理解JavaScript的纯函数""></a></h3><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><h3 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to "为什么需要Redux""></a></h3><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h3 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to "Redux的核心理念""></a></h3><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: 'ADD_ITEM', item: { name: 'Ziu', 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> => <code>reducer</code> => <code>newState</code> => <code>Store</code></li></ul><h3 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to "Redux Demo""></a></h3><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"><div class="tabs"><input type="radio" name="group-U-TBL" id="tab-2dm9vI7" checked="checked"><label for="tab-2dm9vI7">App.jsx</label><input type="radio" name="group-U-TBL" id="tab-8NHW1cj"><label for="tab-8NHW1cj">index.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">classNames</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="redux" tabindex="-1">Redux <a class="header-anchor" href="#redux" aria-label="Permalink to "Redux""></a></h2><ul><li>Redux的核心思想</li><li>Redux的基本使用</li><li>React结合Redux</li><li>Redux的异步操作</li><li>redux-devtool</li><li>reducer的模块拆分</li></ul><h3 id="理解javascript的纯函数" tabindex="-1">理解JavaScript的纯函数 <a class="header-anchor" href="#理解javascript的纯函数" aria-label="Permalink to "理解JavaScript的纯函数""></a></h3><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><h3 id="为什么需要redux" tabindex="-1">为什么需要Redux <a class="header-anchor" href="#为什么需要redux" aria-label="Permalink to "为什么需要Redux""></a></h3><ul><li>JS需要管理的状态越来越多，越来越复杂</li><li>状态不断发生变化之间又相互依赖，这要求视图层也能同步更新</li><li>React提供了自动更新视图的方法，但状态仍需要手动管理</li><li>Redux可以帮我们管理状态，提供了<strong>可预测的状态管理</strong></li><li>框架无关，体积只有2KB大小</li></ul><h3 id="redux的核心理念" tabindex="-1">Redux的核心理念 <a class="header-anchor" href="#redux的核心理念" aria-label="Permalink to "Redux的核心理念""></a></h3><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: 'ADD_ITEM', item: { name: 'Ziu', 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> => <code>reducer</code> => <code>newState</code> => <code>Store</code></li></ul><h3 id="redux-demo" tabindex="-1">Redux Demo <a class="header-anchor" href="#redux-demo" aria-label="Permalink to "Redux Demo""></a></h3><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"><div class="tabs"><input type="radio" name="group-dzYQs" id="tab-3-ul2cZ" checked="checked"><label for="tab-3-ul2cZ">App.jsx</label><input type="radio" name="group-dzYQs" id="tab-Zbe8n-s"><label for="tab-Zbe8n-s">index.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
@ -2232,7 +2232,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createStore</span><span style="color:#A6ACCD;">(reducer)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> 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="`+e+`" alt="redux-usage"></p><h3 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to "进一步封装""></a></h3><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"><div class="tabs"><input type="radio" name="group-A1sia" id="tab-DE8Izds" checked="checked"><label for="tab-DE8Izds">index.js</label><input type="radio" name="group-A1sia" id="tab-YnV9bZl"><label for="tab-YnV9bZl">constants.js</label><input type="radio" name="group-A1sia" id="tab-cF7K9VX"><label for="tab-cF7K9VX">reducer.js</label><input type="radio" name="group-A1sia" id="tab-s4l_Nj0"><label for="tab-s4l_Nj0">actionFactory.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> 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="`+e+`" alt="redux-usage"></p><h3 id="进一步封装" tabindex="-1">进一步封装 <a class="header-anchor" href="#进一步封装" aria-label="Permalink to "进一步封装""></a></h3><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"><div class="tabs"><input type="radio" name="group-suLPx" id="tab-zV5H9rS" checked="checked"><label for="tab-zV5H9rS">index.js</label><input type="radio" name="group-suLPx" id="tab--8LdL8F"><label for="tab--8LdL8F">constants.js</label><input type="radio" name="group-suLPx" id="tab-qC_r808"><label for="tab-qC_r808">reducer.js</label><input type="radio" name="group-suLPx" id="tab-Q_d0wbS"><label for="tab-Q_d0wbS">actionFactory.js</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createStore</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">redux</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> reducer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./reducer</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
@ -2307,7 +2307,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to "Redux的三大原则""></a></h3><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><h3 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to "优化重复代码""></a></h3><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">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"><div class="tabs"><input type="radio" name="group-q-MyY" id="tab-9WuvYek" checked="checked"><label for="tab-9WuvYek">App.jsx</label><input type="radio" name="group-q-MyY" id="tab-XV0cN6t"><label for="tab-XV0cN6t">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="redux的三大原则" tabindex="-1">Redux的三大原则 <a class="header-anchor" href="#redux的三大原则" aria-label="Permalink to "Redux的三大原则""></a></h3><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><h3 id="优化重复代码" tabindex="-1">优化重复代码 <a class="header-anchor" href="#优化重复代码" aria-label="Permalink to "优化重复代码""></a></h3><p>当编写了一些案例的时候会发现，React结合Redux时会编写很多重复的代码</p><p>在每个需要用到Redux中状态的组件中，都需要在不同生命周期做添加订阅/解除订阅的处理，组件初始化时还要从store中取最新的状态</p><p>针对重复代码的问题，可以使用之前学到的高阶组件来做优化</p><p>Redux官方提供的库<code>react-redux</code>，可以让我们更方便的在React中使用Redux</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">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"><div class="tabs"><input type="radio" name="group-cNb-M" id="tab-aF6944B" checked="checked"><label for="tab-aF6944B">App.jsx</label><input type="radio" name="group-cNb-M" id="tab-O7X0k8F"><label for="tab-O7X0k8F">Profile.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">PureComponent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Provider</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react-redux</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">'</span></span>
|
||||
@ -2377,7 +2377,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"><span style="color:#F07178;"> )</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><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><h3 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to "异步Action""></a></h3><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">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"><div class="tabs"><input type="radio" name="group-HJCFe" id="tab-BTXK-KO" checked="checked"><label for="tab-BTXK-KO">index.js</label><input type="radio" name="group-HJCFe" id="tab-o1OCJ3e"><label for="tab-o1OCJ3e">actionFactory.js</label><input type="radio" name="group-HJCFe" id="tab-TGFH46g"><label for="tab-TGFH46g">list.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><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><h3 id="异步action" tabindex="-1">异步Action <a class="header-anchor" href="#异步action" aria-label="Permalink to "异步Action""></a></h3><p>有些场景下，我们希望组件能够直接调用Store中的action来触发网络请求，并且获取到数据</p><p>但是dispatch只允许派发对象类型的Action，不能通过dispatch派发函数</p><p>可以通过中间件<code>redux-thunk</code>来对Redux做增强，让dispatch能够对函数进行派发</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">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"><div class="tabs"><input type="radio" name="group-3cfyr" id="tab-Zi1c2Hy" checked="checked"><label for="tab-Zi1c2Hy">index.js</label><input type="radio" name="group-3cfyr" id="tab-pnx10HB"><label for="tab-pnx10HB">actionFactory.js</label><input type="radio" name="group-3cfyr" id="tab-nuzvw7I"><label for="tab-nuzvw7I">list.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
|
||||
<span class="line highlighted"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createStore</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">applyMiddleware</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">redux</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line highlighted"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> thunk </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">redux-thunk</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> reducer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./reducer</span><span style="color:#89DDFF;">'</span></span>
|
||||
@ -2464,4 +2464,89 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">constants.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">index.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">reducer.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</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><h4 id="combinereducer函数" tabindex="-1">combineReducer函数 <a class="header-anchor" href="#combinereducer函数" aria-label="Permalink to "combineReducer函数""></a></h4><p>前面拆分Store时用到了<code>combineReducer</code>函数，将多个模块reducer组合到一起，函数内部是如何处理的？</p><ul><li>将传入的reducers合并到一个对象中，最终返回一个<code>combination</code>函数（相当于未拆分时传给<code>createStore</code>的<code>reducer</code>函数）</li><li>在执行<code>combination</code>函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state</li><li>新state会触发订阅者发生对应更新，而旧state可以有效地组织订阅者发生刷新</li></ul>`,609),D=[r];function F(y,i,C,A,b,u){return n(),a("div",null,D)}const h=s(c,[["render",F]]);export{d as __pageData,h as default};
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</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><h4 id="combinereducer函数" tabindex="-1">combineReducer函数 <a class="header-anchor" href="#combinereducer函数" aria-label="Permalink to "combineReducer函数""></a></h4><p>前面拆分Store时用到了<code>combineReducer</code>函数，将多个模块reducer组合到一起，函数内部是如何处理的？</p><ul><li>将传入的reducers合并到一个对象中，最终返回一个<code>combination</code>函数（相当于未拆分时传给<code>createStore</code>的<code>reducer</code>函数）</li><li>在执行<code>combination</code>函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state</li><li>新state会触发订阅者发生对应更新，而旧state可以有效地组织订阅者发生刷新</li></ul><p>下面简单写了一下<code>combineReducer</code>的实现原理</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 使用</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">combineReducer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">counter</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> combineReducer</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">postList</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> postListReducer</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 创建一个新的reducer</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">reducer</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回一个对象 是Store的state</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> counter</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">counterReducer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">counter</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> postList</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">postListReducer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">postList</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="reduxtoolkit" tabindex="-1">ReduxToolkit <a class="header-anchor" href="#reduxtoolkit" aria-label="Permalink to "ReduxToolkit""></a></h2><ul><li>ReduxToolkit重构</li><li>ReduxToolkit异步</li><li>connect高阶组件</li><li>中间件的实现原理</li><li>React状态管理选择</li></ul><h3 id="认识reduxtoolkit" tabindex="-1">认识ReduxToolkit <a class="header-anchor" href="#认识reduxtoolkit" aria-label="Permalink to "认识ReduxToolkit""></a></h3><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><h3 id="使用reduxtoolkit重写store" tabindex="-1">使用ReduxToolkit重写Store <a class="header-anchor" href="#使用reduxtoolkit重写store" aria-label="Permalink to "使用ReduxToolkit重写Store""></a></h3><p>Redux Toolkit依赖于react-redux包，所以需要同时安装这二者</p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">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"><div class="tabs"><input type="radio" name="group-r-GIx" id="tab-GeNnIWj" checked="checked"><label for="tab-GeNnIWj">index.js</label><input type="radio" name="group-r-GIx" id="tab-ILGNorb"><label for="tab-ILGNorb">counter.js</label><input type="radio" name="group-r-GIx" id="tab-OINvjLV"><label for="tab-OINvjLV">Counter.jsx</label></div><div class="blocks"><div class="language-tsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/index.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">configureStore</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> counterSlice </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./features/counter</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">configureStore</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">reducer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">counter</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> counterSlice</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> 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></div></div><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// store/features/counter.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createSlice</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@reduxjs/toolkit</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> counterSlice </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createSlice</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">counter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">initialState</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">reducers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">addCount</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">payload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">payload</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subCount</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">payload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">payload</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> actions</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> reducer </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> counterSlice</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> addCount</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> subCount </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> actions</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> reducer</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><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// Counter.jsx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Component</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">connect</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react-redux</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">addCount</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">subCount</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">../store/features/counter</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> mapStateToProps </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">counter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> mapDispatchToProps </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">dispatch</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">increment</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">count</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addCount</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">decrement</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">count</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">subCount</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">action</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">connect</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> mapStateToProps</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> mapDispatchToProps</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Counter</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">render</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">props</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Counter</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">count: </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">count</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">increment</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}></span><span style="color:#A6ACCD;">+1</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">decrement</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}></span><span style="color:#A6ACCD;">-1</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><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><h3 id="使用rtk执行异步dispatch" tabindex="-1">使用RTK执行异步dispatch <a class="header-anchor" href="#使用rtk执行异步dispatch" aria-label="Permalink to "使用RTK执行异步dispatch""></a></h3><p>实际场景中都是在组件中发起网络请求，并且将状态更新到Store中</p><p>之前的开发中，我们通过<code>redux-thunk</code>这个中间件，让dispatch中可以进行异步操作</p><p>ReduxToolkit默认已经给我们集成了Thunk相关的功能：<code>createAsyncThunk</code></p><p>下面我们使用RTK实现一下这个场景：在Profile中请求数据并保存在Store中，在App中展示</p>`,633),D=[r];function F(y,i,C,A,b,u){return n(),a("div",null,D)}const h=s(c,[["render",F]]);export{d as __pageData,h as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",e="/assets/redux-usage.7df84df8.svg",t="/assets/redux-async-action.0dc40e11.svg",d=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682528161000}'),c={name:"note/React.md"},r=l("",609),D=[r];function F(y,i,C,A,b,u){return n(),a("div",null,D)}const h=s(c,[["render",F]]);export{d as __pageData,h as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",e="/assets/redux-usage.7df84df8.svg",t="/assets/redux-async-action.0dc40e11.svg",d=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682586876000}'),c={name:"note/React.md"},r=l("",633),D=[r];function F(y,i,C,A,b,u){return n(),a("div",null,D)}const h=s(c,[["render",F]]);export{d as __pageData,h as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as l,o as e,c as o,R as a}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[],"relativePath":"note/SSR.md","lastUpdated":1682528161000}'),i={name:"note/SSR.md"},t=a("",80),s=[t];function n(c,r,d,p,u,h){return e(),o("div",null,s)}const g=l(i,[["render",n]]);export{D as __pageData,g as default};
|
||||
import{_ as l,o as e,c as o,R as a}from"./chunks/framework.a304f0f7.js";const D=JSON.parse('{"title":"服务端渲染(SSR)","description":"","frontmatter":{},"headers":[],"relativePath":"note/SSR.md","lastUpdated":1682586876000}'),i={name:"note/SSR.md"},t=a("",80),s=[t];function n(c,r,d,p,u,h){return e(),o("div",null,s)}const g=l(i,[["render",n]]);export{D as __pageData,g as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as l,D as p,o as t,c,z as s,a,G as e,R as n}from"./chunks/framework.a304f0f7.js";const r="/assets/gi3.c83cee76.png",i="/assets/gi3-2.8cc1f8a9.png",d="/assets/gi3-3.47dffc9b.png",D="/assets/sign-mac.2c3e272f.png",u="/assets/sign-mac-2.5861d44c.png",F="/assets/mac-chmod.bf888724.jpg",y="/assets/guide-jianguo-1.a7e6fa82.png",h="/assets/guide-jianguo-2.14924b1b.png",m="/assets/gi4.e4051a3e.png",b="/assets/gi5.f517b425.png",O=JSON.parse('{"title":"使用指南","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","lastUpdated":1682528161000}'),_={name:"project/ClipboardManager/guide/index.md"},C=s("h1",{id:"使用指南",tabindex:"-1"},[a("使用指南 "),s("a",{class:"header-anchor",href:"#使用指南","aria-label":'Permalink to "使用指南"'},"")],-1),g=s("h2",{id:"快捷键一览",tabindex:"-1"},[a("快捷键一览 "),s("a",{class:"header-anchor",href:"#快捷键一览","aria-label":'Permalink to "快捷键一览"'},"")],-1),A=n("",6),q=s("code",null,"Ctrl/Command+鼠标左键",-1),f=n("",35),x={id:"webdav同步",tabindex:"-1"},v=s("a",{class:"header-anchor",href:"#webdav同步","aria-label":'Permalink to "WebDav同步 <Badge type="tip" text="^2.0.0" />"'},"",-1),k=s("div",{class:"tip custom-block"},[s("p",{class:"custom-block-title"},"TIP"),s("p",null,[a("自"),s("code",null,"v2.0.0"),a("起，可以通过开通插件会员启用"),s("strong",null,"WebDav同步功能")])],-1),E=s("p",null,[a("👉👉👉"),s("a",{href:"./../vip/#webdav同步功能"},"插件会员/WebDav同步功能"),a("👈👈👈")],-1),P={id:"坚果云同步文件夹",tabindex:"-1"},w=s("a",{class:"header-anchor",href:"#坚果云同步文件夹","aria-label":'Permalink to "坚果云同步文件夹 <Badge type="warning" text="仅旧版本" />"'},"",-1),S=n("",28);function T(j,B,N,V,W,I){const o=p("Badge");return t(),c("div",null,[C,g,s("ul",null,[A,s("li",null,[q,a("点击文本/图片/文件 直接进入预览/打开所在文件夹 "),e(o,{type:"warning",text:"插件会员"})])]),f,s("h3",x,[a("WebDav同步 "),e(o,{type:"tip",text:"^2.0.0"}),a(),v]),k,E,s("h3",P,[a("坚果云同步文件夹 "),e(o,{type:"warning",text:"仅旧版本"}),a(),w]),S])}const R=l(_,[["render",T]]);export{O as __pageData,R as default};
|
||||
import{_ as l,D as p,o as t,c,z as s,a,G as e,R as n}from"./chunks/framework.a304f0f7.js";const r="/assets/gi3.c83cee76.png",i="/assets/gi3-2.8cc1f8a9.png",d="/assets/gi3-3.47dffc9b.png",D="/assets/sign-mac.2c3e272f.png",u="/assets/sign-mac-2.5861d44c.png",F="/assets/mac-chmod.bf888724.jpg",y="/assets/guide-jianguo-1.a7e6fa82.png",h="/assets/guide-jianguo-2.14924b1b.png",m="/assets/gi4.e4051a3e.png",b="/assets/gi5.f517b425.png",O=JSON.parse('{"title":"使用指南","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/guide/index.md","lastUpdated":1682586876000}'),_={name:"project/ClipboardManager/guide/index.md"},C=s("h1",{id:"使用指南",tabindex:"-1"},[a("使用指南 "),s("a",{class:"header-anchor",href:"#使用指南","aria-label":'Permalink to "使用指南"'},"")],-1),g=s("h2",{id:"快捷键一览",tabindex:"-1"},[a("快捷键一览 "),s("a",{class:"header-anchor",href:"#快捷键一览","aria-label":'Permalink to "快捷键一览"'},"")],-1),A=n("",6),q=s("code",null,"Ctrl/Command+鼠标左键",-1),f=n("",35),x={id:"webdav同步",tabindex:"-1"},v=s("a",{class:"header-anchor",href:"#webdav同步","aria-label":'Permalink to "WebDav同步 <Badge type="tip" text="^2.0.0" />"'},"",-1),k=s("div",{class:"tip custom-block"},[s("p",{class:"custom-block-title"},"TIP"),s("p",null,[a("自"),s("code",null,"v2.0.0"),a("起，可以通过开通插件会员启用"),s("strong",null,"WebDav同步功能")])],-1),E=s("p",null,[a("👉👉👉"),s("a",{href:"./../vip/#webdav同步功能"},"插件会员/WebDav同步功能"),a("👈👈👈")],-1),P={id:"坚果云同步文件夹",tabindex:"-1"},w=s("a",{class:"header-anchor",href:"#坚果云同步文件夹","aria-label":'Permalink to "坚果云同步文件夹 <Badge type="warning" text="仅旧版本" />"'},"",-1),S=n("",28);function T(j,B,N,V,W,I){const o=p("Badge");return t(),c("div",null,[C,g,s("ul",null,[A,s("li",null,[q,a("点击文本/图片/文件 直接进入预览/打开所在文件夹 "),e(o,{type:"warning",text:"插件会员"})])]),f,s("h3",x,[a("WebDav同步 "),e(o,{type:"tip",text:"^2.0.0"}),a(),v]),k,E,s("h3",P,[a("坚果云同步文件夹 "),e(o,{type:"warning",text:"仅旧版本"}),a(),w]),S])}const R=l(_,[["render",T]]);export{O as __pageData,R as default};
|
||||
@ -1 +1 @@
|
||||
import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据读写<strong>完全本地化</strong></li><li>✅ 快速<code>收藏</code>/<code>转存</code>/<code>分词</code>/<code>复制</code>/<code>删除</code>/<code>打开文件&目标文件夹</code></li><li>✅ 功能按钮 定义<strong>无限可能</strong> <code>OCR识别</code> <code>百度搜索</code> <code>百度识图</code> <code>统计文本字数</code> <code>颜色管理</code> <code>识别图片中二维码</code> <code>上传到图床</code> <code>翻译</code></li><li>✅ <code>鼠标左键</code> 复制并粘贴 <code>鼠标右键</code> 仅复制</li><li>✅ 按下<code>Shift</code>或<code>空格</code>进入<strong>多选模式</strong> 连续选择多条内容合并复制 支持<strong>跨标签</strong>合并复制/粘贴</li><li>✅ 键盘 <code>↑</code> <code>↓</code> 选中历史记录，按下回车直接粘贴</li><li>✅ 键盘 <code>←</code> <code>→</code>切换分类 <code>Tab</code>键连续切换分类</li><li>✅ 使用 <code>Ctrl/Alt+数字键</code> 快速粘贴</li><li>✅ 插件内<code>输入任意字母或数字</code>自动聚焦搜索框 支持使用<code>空格</code>同时检索<strong>多个关键词</strong></li><li>✅ <strong>超级Markdown</strong>合并剪贴板内容导出图文 <strong>超级粘贴</strong> 直接转存为文件 <strong>智慧分词</strong> 快速拖选指定内容</li><li>✅ 优雅的界面动效与交互 跟随系统的深色模式</li><li>✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···</li></ul><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to "📚 安装方式""></a></h2><ul><li>官方插件市场安装</li><li>离线插件安装：<a href="https://pan.baidu.com/s/14GJIXWDU2F4jsqDDq73aFg?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul><p><a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&jump_from=webapi" target="_blank" rel="noreferrer">催更群 769115389</a> <a href="https://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1682528161000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};
|
||||
import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></a></h2><p><strong>首次安装需要设置“跟随主程序同时启动”</strong></p><ul><li>✅ 监听剪贴板并持续将新内容更新到本地磁盘 数据读写<strong>完全本地化</strong></li><li>✅ 快速<code>收藏</code>/<code>转存</code>/<code>分词</code>/<code>复制</code>/<code>删除</code>/<code>打开文件&目标文件夹</code></li><li>✅ 功能按钮 定义<strong>无限可能</strong> <code>OCR识别</code> <code>百度搜索</code> <code>百度识图</code> <code>统计文本字数</code> <code>颜色管理</code> <code>识别图片中二维码</code> <code>上传到图床</code> <code>翻译</code></li><li>✅ <code>鼠标左键</code> 复制并粘贴 <code>鼠标右键</code> 仅复制</li><li>✅ 按下<code>Shift</code>或<code>空格</code>进入<strong>多选模式</strong> 连续选择多条内容合并复制 支持<strong>跨标签</strong>合并复制/粘贴</li><li>✅ 键盘 <code>↑</code> <code>↓</code> 选中历史记录，按下回车直接粘贴</li><li>✅ 键盘 <code>←</code> <code>→</code>切换分类 <code>Tab</code>键连续切换分类</li><li>✅ 使用 <code>Ctrl/Alt+数字键</code> 快速粘贴</li><li>✅ 插件内<code>输入任意字母或数字</code>自动聚焦搜索框 支持使用<code>空格</code>同时检索<strong>多个关键词</strong></li><li>✅ <strong>超级Markdown</strong>合并剪贴板内容导出图文 <strong>超级粘贴</strong> 直接转存为文件 <strong>智慧分词</strong> 快速拖选指定内容</li><li>✅ 优雅的界面动效与交互 跟随系统的深色模式</li><li>✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···</li></ul><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to "📚 安装方式""></a></h2><ul><li>官方插件市场安装</li><li>离线插件安装：<a href="https://pan.baidu.com/s/14GJIXWDU2F4jsqDDq73aFg?pwd=Ziuc" target="_blank" rel="noreferrer">百度网盘</a></li></ul><p><a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&jump_from=webapi" target="_blank" rel="noreferrer">催更群 769115389</a> <a href="https://github.com/ZiuChen" target="_blank" rel="noreferrer">Github</a></p>',6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1682586876000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};
|
||||
@ -1 +1 @@
|
||||
import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g("",6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1682528161000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};
|
||||
import{D as e,o as r,c as n,G as o,a4 as i,a5 as d,z as l,R as g}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.98e788ed.png",p="/assets/img1.ed7d5c23.png",_="/assets/img2.79214eff.png",u="/assets/img3.e381051c.png",h="/assets/img4.3572b25f.png",f="/assets/img5.f7491650.png",b="/assets/img6.083aa794.png",q="/assets/img7.dd9f1b9f.png",T=l("br",null,null,-1),k=g("",6),x=JSON.parse('{"title":"超级剪贴板","description":"","frontmatter":{"title":"超级剪贴板","navbar":false},"headers":[],"relativePath":"project/ClipboardManager/index.md","lastUpdated":1682586876000}'),C={name:"project/ClipboardManager/index.md"},D=Object.assign(C,{setup(S){const t={subTitle:"✨ 强大的剪贴板管理工具。",logo:m,linkList:[{content:"⭐ 开源代码",target:"https://github.com/ZiuChen/ClipboardManager"},{content:"🚀 使用指南",target:"./guide/"},{content:"🌎 疑难解答",target:"./statement/"},{content:"👑 插件会员",target:"./vip/"},{content:"🚚 更新日志",target:"./log/"}]},c=[{src:p},{src:_},{src:u},{src:h},{src:f},{src:b},{src:q}];return(P,I)=>{const s=e("Title"),a=e("ImgSlider");return r(),n("div",null,[o(s,i(d(t)),null,16),T,o(a,{imgSliderList:c}),k])}}});export{x as __pageData,D as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as l,o as i,c as a,R as e}from"./chunks/framework.a304f0f7.js";const s=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/log/index.md","lastUpdated":1682528161000}'),o={name:"project/ClipboardManager/log/index.md"},t=e("",141),d=[t];function r(c,h,f,u,v,n){return i(),a("div",null,d)}const p=l(o,[["render",r]]);export{s as __pageData,p as default};
|
||||
import{_ as l,o as i,c as a,R as e}from"./chunks/framework.a304f0f7.js";const s=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/log/index.md","lastUpdated":1682586876000}'),o={name:"project/ClipboardManager/log/index.md"},t=e("",141),d=[t];function r(c,h,f,u,v,n){return i(),a("div",null,d)}const p=l(o,[["render",r]]);export{s as __pageData,p as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as a,o as e,c as o,R as l}from"./chunks/framework.a304f0f7.js";const _=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/ClipboardManager/statement/index.md","lastUpdated":1682528161000}'),r={name:"project/ClipboardManager/statement/index.md"},i=l("",34),t=[i];function d(c,n,s,h,p,u){return e(),o("div",null,t)}const m=a(r,[["render",d]]);export{_ as __pageData,m as default};
|
||||
import{_ as a,o as e,c as o,R as l}from"./chunks/framework.a304f0f7.js";const _=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/ClipboardManager/statement/index.md","lastUpdated":1682586876000}'),r={name:"project/ClipboardManager/statement/index.md"},i=l("",34),t=[i];function d(c,n,s,h,p,u){return e(),o("div",null,t)}const m=a(r,[["render",d]]);export{_ as __pageData,m as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as a,D as n,o as c,c as s,z as e,a as l,G as o,R as i}from"./chunks/framework.a304f0f7.js";const r="/assets/vip-webdav.2e7c539c.png",d="/assets/vip-highlight.e3827906.png",R=JSON.parse('{"title":"插件会员","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/vip/index.md","lastUpdated":1682528161000}'),p={name:"project/ClipboardManager/vip/index.md"},h=i("",3),u=e("strong",null,"插件会员",-1),_=e("code",null,"WebDav数据多端同步",-1),g=e("code",null,"支持保存2000条历史记录",-1),b=e("code",null,"不限制历史记录过期时间",-1),m=e("code",null,"文本/图片/文件预览增强, 按住Ctrl/Command点击 解锁更多操作",-1),k=e("code",null,"键盘操作模式 屏蔽鼠标 高效快捷",-1),v=e("code",null,"简洁模式 隐藏页面中不必要的组件与元素",-1),f=e("code",null,"自定义分类排序",-1),x=e("code",null,"预览页代码高亮",-1),q=e("code",null,"关闭剪贴板图片记录",-1),T=e("code",null,"插件使用统计",-1),D=e("li",null,[e("strong",null,"...")],-1),y=e("strong",null,"uTools会员",-1),N=e("code",null,"插件使用统计",-1),C=i("",21);function P(w,W,S,V,j,A){const t=n("Badge");return c(),s("div",null,[h,e("ul",null,[e("li",null,[u,e("ul",null,[e("li",null,[_,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[g,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[b,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[m,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[k,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[v,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[f,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[x,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[q,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[T,l(),o(t,{type:"tip",text:"已上线"})]),D])]),e("li",null,[y,e("ul",null,[e("li",null,[N,l(),o(t,{type:"tip",text:"已上线"})])])])]),C])}const B=a(p,[["render",P]]);export{R as __pageData,B as default};
|
||||
import{_ as a,D as n,o as c,c as s,z as e,a as l,G as o,R as i}from"./chunks/framework.a304f0f7.js";const r="/assets/vip-webdav.2e7c539c.png",d="/assets/vip-highlight.e3827906.png",R=JSON.parse('{"title":"插件会员","description":"","frontmatter":{},"headers":[],"relativePath":"project/ClipboardManager/vip/index.md","lastUpdated":1682586876000}'),p={name:"project/ClipboardManager/vip/index.md"},h=i("",3),u=e("strong",null,"插件会员",-1),_=e("code",null,"WebDav数据多端同步",-1),g=e("code",null,"支持保存2000条历史记录",-1),b=e("code",null,"不限制历史记录过期时间",-1),m=e("code",null,"文本/图片/文件预览增强, 按住Ctrl/Command点击 解锁更多操作",-1),k=e("code",null,"键盘操作模式 屏蔽鼠标 高效快捷",-1),v=e("code",null,"简洁模式 隐藏页面中不必要的组件与元素",-1),f=e("code",null,"自定义分类排序",-1),x=e("code",null,"预览页代码高亮",-1),q=e("code",null,"关闭剪贴板图片记录",-1),T=e("code",null,"插件使用统计",-1),D=e("li",null,[e("strong",null,"...")],-1),y=e("strong",null,"uTools会员",-1),N=e("code",null,"插件使用统计",-1),C=i("",21);function P(w,W,S,V,j,A){const t=n("Badge");return c(),s("div",null,[h,e("ul",null,[e("li",null,[u,e("ul",null,[e("li",null,[_,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[g,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[b,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[m,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[k,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[v,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[f,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[x,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[q,l(),o(t,{type:"tip",text:"已上线"})]),e("li",null,[T,l(),o(t,{type:"tip",text:"已上线"})]),D])]),e("li",null,[y,e("ul",null,[e("li",null,[N,l(),o(t,{type:"tip",text:"已上线"})])])])]),C])}const B=a(p,[["render",P]]);export{R as __pageData,B as default};
|
||||
@ -1 +1 @@
|
||||
import{D as e,o as r,c,G as n,a4 as d,a5 as u,z as t,a as s}from"./chunks/framework.a304f0f7.js";const g="/assets/logo.df975406.png",m="/assets/img1.49b1ec51.png",p="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",h="/assets/img4.cd285ff7.png",S=t("br",null,null,-1),f=t("h2",{id:"🔰-开始使用",tabindex:"-1"},[s("🔰 开始使用 "),t("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"")],-1),b=t("ul",null,[t("li",null,"运行JavaScript代码 快速验证代码逻辑"),t("li",null,"支持切换NodeJS/浏览器运行环境"),t("li",null,[t("code",null,"Ctrl/Command+R"),s(" 快速运行代码")]),t("li",null,"支持代码回溯 实时记录代码运行历史"),t("li",null,"支持手动触发代码运行/实时运行代码"),t("li",null,"适配深色模式")],-1),k=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1682528161000}'),J={name:"project/JSRunner/index.md"},C=Object.assign(J,{setup(v){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:g,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},l=[{src:m},{src:p},{src:_},{src:h}];return(x,R)=>{const o=e("Title"),i=e("ImgSlider");return r(),c("div",null,[n(o,d(u(a)),null,16),S,n(i,{imgSliderList:l}),f,b])}}});export{k as __pageData,C as default};
|
||||
import{D as e,o as r,c,G as n,a4 as d,a5 as u,z as t,a as s}from"./chunks/framework.a304f0f7.js";const g="/assets/logo.df975406.png",m="/assets/img1.49b1ec51.png",p="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",h="/assets/img4.cd285ff7.png",S=t("br",null,null,-1),f=t("h2",{id:"🔰-开始使用",tabindex:"-1"},[s("🔰 开始使用 "),t("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"")],-1),b=t("ul",null,[t("li",null,"运行JavaScript代码 快速验证代码逻辑"),t("li",null,"支持切换NodeJS/浏览器运行环境"),t("li",null,[t("code",null,"Ctrl/Command+R"),s(" 快速运行代码")]),t("li",null,"支持代码回溯 实时记录代码运行历史"),t("li",null,"支持手动触发代码运行/实时运行代码"),t("li",null,"适配深色模式")],-1),k=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1682586876000}'),J={name:"project/JSRunner/index.md"},C=Object.assign(J,{setup(v){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:g,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},l=[{src:m},{src:p},{src:_},{src:h}];return(x,R)=>{const o=e("Title"),i=e("ImgSlider");return r(),c("div",null,[n(o,d(u(a)),null,16),S,n(i,{imgSliderList:l}),f,b])}}});export{k as __pageData,C as default};
|
||||
@ -1 +1 @@
|
||||
import{D as e,o as r,c,G as n,a4 as d,a5 as u,z as t,a as s}from"./chunks/framework.a304f0f7.js";const g="/assets/logo.df975406.png",m="/assets/img1.49b1ec51.png",p="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",h="/assets/img4.cd285ff7.png",S=t("br",null,null,-1),f=t("h2",{id:"🔰-开始使用",tabindex:"-1"},[s("🔰 开始使用 "),t("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"")],-1),b=t("ul",null,[t("li",null,"运行JavaScript代码 快速验证代码逻辑"),t("li",null,"支持切换NodeJS/浏览器运行环境"),t("li",null,[t("code",null,"Ctrl/Command+R"),s(" 快速运行代码")]),t("li",null,"支持代码回溯 实时记录代码运行历史"),t("li",null,"支持手动触发代码运行/实时运行代码"),t("li",null,"适配深色模式")],-1),k=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1682528161000}'),J={name:"project/JSRunner/index.md"},C=Object.assign(J,{setup(v){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:g,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},l=[{src:m},{src:p},{src:_},{src:h}];return(x,R)=>{const o=e("Title"),i=e("ImgSlider");return r(),c("div",null,[n(o,d(u(a)),null,16),S,n(i,{imgSliderList:l}),f,b])}}});export{k as __pageData,C as default};
|
||||
import{D as e,o as r,c,G as n,a4 as d,a5 as u,z as t,a as s}from"./chunks/framework.a304f0f7.js";const g="/assets/logo.df975406.png",m="/assets/img1.49b1ec51.png",p="/assets/img2.a5b117fb.png",_="/assets/img3.a5b785fc.png",h="/assets/img4.cd285ff7.png",S=t("br",null,null,-1),f=t("h2",{id:"🔰-开始使用",tabindex:"-1"},[s("🔰 开始使用 "),t("a",{class:"header-anchor",href:"#🔰-开始使用","aria-label":'Permalink to "🔰 开始使用"'},"")],-1),b=t("ul",null,[t("li",null,"运行JavaScript代码 快速验证代码逻辑"),t("li",null,"支持切换NodeJS/浏览器运行环境"),t("li",null,[t("code",null,"Ctrl/Command+R"),s(" 快速运行代码")]),t("li",null,"支持代码回溯 实时记录代码运行历史"),t("li",null,"支持手动触发代码运行/实时运行代码"),t("li",null,"适配深色模式")],-1),k=JSON.parse('{"title":"超级JavaScript","description":"","frontmatter":{"title":"超级JavaScript","navbar":false},"headers":[],"relativePath":"project/JSRunner/index.md","lastUpdated":1682586876000}'),J={name:"project/JSRunner/index.md"},C=Object.assign(J,{setup(v){const a={subTitle:"✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑",logo:g,linkList:[{content:"🕶️ 在线体验",target:"https://ziuchen.github.io/JSRunner"},{content:"👨🏻💻 开源地址",target:"https://github.com/ZiuChen/JSRunner"},{content:"🚚 更新日志",target:"./log/"}]},l=[{src:m},{src:p},{src:_},{src:h}];return(x,R)=>{const o=e("Title"),i=e("ImgSlider");return r(),c("div",null,[n(o,d(u(a)),null,16),S,n(i,{imgSliderList:l}),f,b])}}});export{k as __pageData,C as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,R as o}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1682528161000}'),i={name:"project/JSRunner/log/index.md"},l=o('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-0-2" tabindex="-1">v1.0.2 <a class="header-anchor" href="#v1-0-2" aria-label="Permalink to "v1.0.2""></a></h2><p><code>2023-04-24</code></p><ul><li>fix: 修复NodeJS环境下无法导入第三方模块的问题</li></ul><h2 id="v1-0-1" tabindex="-1">v1.0.1 <a class="header-anchor" href="#v1-0-1" aria-label="Permalink to "v1.0.1""></a></h2><p><code>2023-04-23</code></p><ul><li>feat: 关于页添加项目开源地址</li><li>fix: 即时执行模式下代码为空时忽略警告</li><li>fix: 调整历史回溯的数量限制</li></ul><h2 id="v1-0-0" tabindex="-1">v1.0.0 <a class="header-anchor" href="#v1-0-0" aria-label="Permalink to "v1.0.0""></a></h2><p><code>2023-04-19</code></p><ul><li>插件发布</li></ul>',10),r=[l];function n(d,c,s,_,h,u){return a(),t("div",null,r)}const v=e(i,[["render",n]]);export{f as __pageData,v as default};
|
||||
import{_ as e,o as a,c as t,R as o}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1682586876000}'),i={name:"project/JSRunner/log/index.md"},l=o('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-0-2" tabindex="-1">v1.0.2 <a class="header-anchor" href="#v1-0-2" aria-label="Permalink to "v1.0.2""></a></h2><p><code>2023-04-24</code></p><ul><li>fix: 修复NodeJS环境下无法导入第三方模块的问题</li></ul><h2 id="v1-0-1" tabindex="-1">v1.0.1 <a class="header-anchor" href="#v1-0-1" aria-label="Permalink to "v1.0.1""></a></h2><p><code>2023-04-23</code></p><ul><li>feat: 关于页添加项目开源地址</li><li>fix: 即时执行模式下代码为空时忽略警告</li><li>fix: 调整历史回溯的数量限制</li></ul><h2 id="v1-0-0" tabindex="-1">v1.0.0 <a class="header-anchor" href="#v1-0-0" aria-label="Permalink to "v1.0.0""></a></h2><p><code>2023-04-19</code></p><ul><li>插件发布</li></ul>',10),r=[l];function n(d,c,s,_,h,u){return a(),t("div",null,r)}const v=e(i,[["render",n]]);export{f as __pageData,v as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,R as o}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1682528161000}'),i={name:"project/JSRunner/log/index.md"},l=o("",10),r=[l];function n(d,c,s,_,h,u){return a(),t("div",null,r)}const v=e(i,[["render",n]]);export{f as __pageData,v as default};
|
||||
import{_ as e,o as a,c as t,R as o}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/JSRunner/log/index.md","lastUpdated":1682586876000}'),i={name:"project/JSRunner/log/index.md"},l=o("",10),r=[l];function n(d,c,s,_,h,u){return a(),t("div",null,r)}const v=e(i,[["render",n]]);export{f as __pageData,v as default};
|
||||
@ -1 +1 @@
|
||||
import{D as t,o as s,c as r,G as e,a4 as l,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=d("br",null,null,-1),k=_('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></a></h2><ul><li>由ByteMD强力驱动，功能丰富、性能强劲</li><li>支持GFM扩展语法、脚注、Gemoji、KaTeX数学公式、Mermaid图表</li><li>支持通过Frontmatter设置多种主题、代码高亮样式</li><li>支持多级目录，目录支持无限嵌套</li><li>支持通过粘贴/拖拽的方式批量上传图片、支持截取屏幕截图</li><li>支持Markdown文件的批量导入、批量导出</li><li>支持插件多开，同时编辑/参考多个文章</li><li>支持实时同步预览、自动保存</li></ul>',2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1682528161000}'),M={name:"project/Markdown/index.md"},P=Object.assign(M,{setup(S){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(T,b)=>{const n=t("Title"),i=t("ImgSlider");return s(),r("div",null,[e(n,l(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
|
||||
import{D as t,o as s,c as r,G as e,a4 as l,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=d("br",null,null,-1),k=_('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></a></h2><ul><li>由ByteMD强力驱动，功能丰富、性能强劲</li><li>支持GFM扩展语法、脚注、Gemoji、KaTeX数学公式、Mermaid图表</li><li>支持通过Frontmatter设置多种主题、代码高亮样式</li><li>支持多级目录，目录支持无限嵌套</li><li>支持通过粘贴/拖拽的方式批量上传图片、支持截取屏幕截图</li><li>支持Markdown文件的批量导入、批量导出</li><li>支持插件多开，同时编辑/参考多个文章</li><li>支持实时同步预览、自动保存</li></ul>',2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1682586876000}'),M={name:"project/Markdown/index.md"},P=Object.assign(M,{setup(S){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(T,b)=>{const n=t("Title"),i=t("ImgSlider");return s(),r("div",null,[e(n,l(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
|
||||
@ -1 +1 @@
|
||||
import{D as t,o as s,c as r,G as e,a4 as l,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=d("br",null,null,-1),k=_("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1682528161000}'),M={name:"project/Markdown/index.md"},P=Object.assign(M,{setup(S){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(T,b)=>{const n=t("Title"),i=t("ImgSlider");return s(),r("div",null,[e(n,l(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
|
||||
import{D as t,o as s,c as r,G as e,a4 as l,a5 as c,z as d,R as _}from"./chunks/framework.a304f0f7.js";const m="/assets/logo.16601c26.png",g="/assets/img1.7a494e3a.png",p="/assets/img2.4ebfc061.png",u="/assets/img3.105ee736.png",h=d("br",null,null,-1),k=_("",2),w=JSON.parse('{"title":"超级Markdown","description":"","frontmatter":{"title":"超级Markdown","navbar":false},"headers":[],"relativePath":"project/Markdown/index.md","lastUpdated":1682586876000}'),M={name:"project/Markdown/index.md"},P=Object.assign(M,{setup(S){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(T,b)=>{const n=t("Title"),i=t("ImgSlider");return s(),r("div",null,[e(n,l(c(a)),null,16),h,e(i,{imgSliderList:o}),k])}}});export{w as __pageData,P as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1682528161000}'),t={name:"project/Markdown/log/index.md"},o=l('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-1-4" tabindex="-1">v1.1.4 <a class="header-anchor" href="#v1-1-4" aria-label="Permalink to "v1.1.4""></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 "v1.1.3""></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 "v1.1.2""></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 "v1.1.1""></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 "v1.1.0""></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 "v1.0.1""></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 "v1.0.0""></a></h2><p><code>2023-04-01</code></p><ul><li>插件发布</li></ul>',22),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const _=a(t,[["render",d]]);export{p as __pageData,_ as default};
|
||||
import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1682586876000}'),t={name:"project/Markdown/log/index.md"},o=l('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-1-4" tabindex="-1">v1.1.4 <a class="header-anchor" href="#v1-1-4" aria-label="Permalink to "v1.1.4""></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 "v1.1.3""></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 "v1.1.2""></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 "v1.1.1""></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 "v1.1.0""></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 "v1.0.1""></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 "v1.0.0""></a></h2><p><code>2023-04-01</code></p><ul><li>插件发布</li></ul>',22),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const _=a(t,[["render",d]]);export{p as __pageData,_ as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1682528161000}'),t={name:"project/Markdown/log/index.md"},o=l("",22),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const _=a(t,[["render",d]]);export{p as __pageData,_ as default};
|
||||
import{_ as a,o as e,c as i,R as l}from"./chunks/framework.a304f0f7.js";const p=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/log/index.md","lastUpdated":1682586876000}'),t={name:"project/Markdown/log/index.md"},o=l("",22),r=[o];function d(c,n,h,s,f,u){return e(),i("div",null,r)}const _=a(t,[["render",d]]);export{p as __pageData,_ as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o,c as d,R as c}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","lastUpdated":1682528161000}'),p={name:"project/Markdown/shortcut/index.md"},t=c('<h1 id="快捷键一览" tabindex="-1">快捷键一览 <a class="header-anchor" href="#快捷键一览" aria-label="Permalink to "快捷键一览""></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 "Markdown 语法""></a></h2><p>一级标题 <code># 标题</code></p><p>二级标题 <code>## 标题</code></p><p>三级标题 <code>### 标题</code></p><p>粗体 <code>**粗体文本**</code></p><p>斜体 <code>*斜体文本*</code></p><p>引用 <code>> 引用文本</code></p><p>链接 <code>[链接描述](url)</code></p><p>图片 <code></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),a=[t];function r(n,i,s,_,m,h){return o(),d("div",null,a)}const f=e(p,[["render",r]]);export{u as __pageData,f as default};
|
||||
import{_ as e,o,c as d,R as c}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","lastUpdated":1682586876000}'),p={name:"project/Markdown/shortcut/index.md"},t=c('<h1 id="快捷键一览" tabindex="-1">快捷键一览 <a class="header-anchor" href="#快捷键一览" aria-label="Permalink to "快捷键一览""></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 "Markdown 语法""></a></h2><p>一级标题 <code># 标题</code></p><p>二级标题 <code>## 标题</code></p><p>三级标题 <code>### 标题</code></p><p>粗体 <code>**粗体文本**</code></p><p>斜体 <code>*斜体文本*</code></p><p>引用 <code>> 引用文本</code></p><p>链接 <code>[链接描述](url)</code></p><p>图片 <code></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),a=[t];function r(n,i,s,_,m,h){return o(),d("div",null,a)}const f=e(p,[["render",r]]);export{u as __pageData,f as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o,c as d,R as c}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","lastUpdated":1682528161000}'),p={name:"project/Markdown/shortcut/index.md"},t=c("",28),a=[t];function r(n,i,s,_,m,h){return o(),d("div",null,a)}const f=e(p,[["render",r]]);export{u as __pageData,f as default};
|
||||
import{_ as e,o,c as d,R as c}from"./chunks/framework.a304f0f7.js";const u=JSON.parse('{"title":"快捷键一览","description":"","frontmatter":{},"headers":[],"relativePath":"project/Markdown/shortcut/index.md","lastUpdated":1682586876000}'),p={name:"project/Markdown/shortcut/index.md"},t=c("",28),a=[t];function r(n,i,s,_,m,h){return o(),d("div",null,a)}const f=e(p,[["render",r]]);export{u as __pageData,f as default};
|
||||
@ -1 +1 @@
|
||||
import{D as a,o as l,c as o,G as r,a4 as i,a5 as s,R as n}from"./chunks/framework.a304f0f7.js";const c="/assets/img1.c8b019e1.png",_="/assets/img2.e389ad4d.png",p="/assets/logo.b98f7a12.png",d=n('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></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=""></p><p><img src="'+_+'" alt=""></p><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to "📚 安装方式""></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},"headers":[],"relativePath":"project/SmartWordBreak/index.md","lastUpdated":1682528161000}'),m={name:"project/SmartWordBreak/index.md"},T=Object.assign(m,{setup(u){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(g,h)=>{const e=a("Title");return l(),o("div",null,[r(e,i(s(t)),null,16),d])}}});export{b as __pageData,T as default};
|
||||
import{D as a,o as l,c as o,G as r,a4 as i,a5 as s,R as n}from"./chunks/framework.a304f0f7.js";const c="/assets/img1.c8b019e1.png",_="/assets/img2.e389ad4d.png",p="/assets/logo.b98f7a12.png",d=n('<h2 id="🔰-开始使用" tabindex="-1">🔰 开始使用 <a class="header-anchor" href="#🔰-开始使用" aria-label="Permalink to "🔰 开始使用""></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=""></p><p><img src="'+_+'" alt=""></p><h2 id="📚-安装方式" tabindex="-1">📚 安装方式 <a class="header-anchor" href="#📚-安装方式" aria-label="Permalink to "📚 安装方式""></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},"headers":[],"relativePath":"project/SmartWordBreak/index.md","lastUpdated":1682586876000}'),m={name:"project/SmartWordBreak/index.md"},T=Object.assign(m,{setup(u){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(g,h)=>{const e=a("Title");return l(),o("div",null,[r(e,i(s(t)),null,16),d])}}});export{b as __pageData,T as default};
|
||||
@ -1 +1 @@
|
||||
import{D as a,o as l,c as o,G as r,a4 as i,a5 as s,R as n}from"./chunks/framework.a304f0f7.js";const c="/assets/img1.c8b019e1.png",_="/assets/img2.e389ad4d.png",p="/assets/logo.b98f7a12.png",d=n("",8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","lastUpdated":1682528161000}'),m={name:"project/SmartWordBreak/index.md"},T=Object.assign(m,{setup(u){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(g,h)=>{const e=a("Title");return l(),o("div",null,[r(e,i(s(t)),null,16),d])}}});export{b as __pageData,T as default};
|
||||
import{D as a,o as l,c as o,G as r,a4 as i,a5 as s,R as n}from"./chunks/framework.a304f0f7.js";const c="/assets/img1.c8b019e1.png",_="/assets/img2.e389ad4d.png",p="/assets/logo.b98f7a12.png",d=n("",8),b=JSON.parse('{"title":"超级分词","description":"","frontmatter":{"title":"超级分词","navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/index.md","lastUpdated":1682586876000}'),m={name:"project/SmartWordBreak/index.md"},T=Object.assign(m,{setup(u){const t={subTitle:"✨ 智慧分词，快速提取文本关键词。",logo:p,linkList:[{content:"⭐ 插件发布页",target:"https://yuanliao.info/d/5722/29"},{content:"🌎 Q&A",target:"./statement/"},{content:"🚚 更新日志",target:"./log/"}]};return(g,h)=>{const e=a("Title");return l(),o("div",null,[r(e,i(s(t)),null,16),d])}}});export{b as __pageData,T as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as e,c as l,R as t}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","lastUpdated":1682528161000}'),o={name:"project/SmartWordBreak/log/index.md"},i=t('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-0-5" tabindex="-1">v1.0.5 <a class="header-anchor" href="#v1-0-5" aria-label="Permalink to "v1.0.5""></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 "v1.0.4""></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 "v1.0.3""></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 "v1.0.2""></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 "v1.0.1""></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 "v1.0.0""></a></h2><p><code>2022-09-11</code></p><ul><li>release: v1.0.0发布</li></ul>',19),r=[i];function d(c,n,h,s,u,v){return e(),l("div",null,r)}const p=a(o,[["render",d]]);export{f as __pageData,p as default};
|
||||
import{_ as a,o as e,c as l,R as t}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","lastUpdated":1682586876000}'),o={name:"project/SmartWordBreak/log/index.md"},i=t('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><h2 id="v1-0-5" tabindex="-1">v1.0.5 <a class="header-anchor" href="#v1-0-5" aria-label="Permalink to "v1.0.5""></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 "v1.0.4""></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 "v1.0.3""></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 "v1.0.2""></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 "v1.0.1""></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 "v1.0.0""></a></h2><p><code>2022-09-11</code></p><ul><li>release: v1.0.0发布</li></ul>',19),r=[i];function d(c,n,h,s,u,v){return e(),l("div",null,r)}const p=a(o,[["render",d]]);export{f as __pageData,p as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as e,c as l,R as t}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","lastUpdated":1682528161000}'),o={name:"project/SmartWordBreak/log/index.md"},i=t("",19),r=[i];function d(c,n,h,s,u,v){return e(),l("div",null,r)}const p=a(o,[["render",d]]);export{f as __pageData,p as default};
|
||||
import{_ as a,o as e,c as l,R as t}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"更新日志","description":"","frontmatter":{},"headers":[],"relativePath":"project/SmartWordBreak/log/index.md","lastUpdated":1682586876000}'),o={name:"project/SmartWordBreak/log/index.md"},i=t("",19),r=[i];function d(c,n,h,s,u,v){return e(),l("div",null,r)}const p=a(o,[["render",d]]);export{f as __pageData,p as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as o,R as t}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1682528161000}'),l={name:"project/SmartWordBreak/statement/index.md"},i=t('<h1 id="q-a" tabindex="-1">Q&A <a class="header-anchor" href="#q-a" aria-label="Permalink to "Q&A""></a></h1><ul><li>Q: 为什么要收费</li><li>A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置</li></ul><hr><ul><li>Q: 我支付了，但是没有收到额度</li><li>A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请加入<a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&jump_from=webapi" target="_blank" rel="noreferrer">QQ群 769115389</a>并联系我，我会尽快核实并为你解决</li></ul><hr><ul><li>Q: 我之前赞赏过，可以有优惠吗</li><li>A: 2022年9月13日0:00前，赞赏过我的uTools用户，请发送： <ul><li><code>UUID</code>(超级分词插件内展示)</li><li><code>赞赏金额</code></li><li><code>赞赏时间</code></li><li><code>支付截图</code></li></ul></li><li>到邮箱<code>ZiuChen@outlook.com</code>，邮箱主题为：<code>申请超级分词赞赏额度</code>，我将在核实后为你提供<code>赞赏金额+15%</code>的额度，感谢你的支持！💖。</li></ul>',6),r=[i];function c(d,n,s,_,m,p){return a(),o("div",null,r)}const f=e(l,[["render",c]]);export{h as __pageData,f as default};
|
||||
import{_ as e,o as a,c as o,R as t}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1682586876000}'),l={name:"project/SmartWordBreak/statement/index.md"},i=t('<h1 id="q-a" tabindex="-1">Q&A <a class="header-anchor" href="#q-a" aria-label="Permalink to "Q&A""></a></h1><ul><li>Q: 为什么要收费</li><li>A: 此功能需要服务器资源, 而服务器资源有限, 故暂时只开放部分的免费资源给大家使用, 普通用户每日有部分免费额度, 额度每日0:00重置</li></ul><hr><ul><li>Q: 我支付了，但是没有收到额度</li><li>A: 支付成功后，插件会自动获取最新用户信息，如果信息没有自动更新，请尝试退出插件后重新进入，如果仍未收到额度，请加入<a href="https://qm.qq.com/cgi-bin/qm/qr?k=9qfHKTaQuWqYN1ys1yiQPdJ4iIlHwgL5&jump_from=webapi" target="_blank" rel="noreferrer">QQ群 769115389</a>并联系我，我会尽快核实并为你解决</li></ul><hr><ul><li>Q: 我之前赞赏过，可以有优惠吗</li><li>A: 2022年9月13日0:00前，赞赏过我的uTools用户，请发送： <ul><li><code>UUID</code>(超级分词插件内展示)</li><li><code>赞赏金额</code></li><li><code>赞赏时间</code></li><li><code>支付截图</code></li></ul></li><li>到邮箱<code>ZiuChen@outlook.com</code>，邮箱主题为：<code>申请超级分词赞赏额度</code>，我将在核实后为你提供<code>赞赏金额+15%</code>的额度，感谢你的支持！💖。</li></ul>',6),r=[i];function c(d,n,s,_,m,p){return a(),o("div",null,r)}const f=e(l,[["render",c]]);export{h as __pageData,f as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as o,R as t}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1682528161000}'),l={name:"project/SmartWordBreak/statement/index.md"},i=t("",6),r=[i];function c(d,n,s,_,m,p){return a(),o("div",null,r)}const f=e(l,[["render",c]]);export{h as __pageData,f as default};
|
||||
import{_ as e,o as a,c as o,R as t}from"./chunks/framework.a304f0f7.js";const h=JSON.parse('{"title":"Q&A","description":"","frontmatter":{"navbar":false},"headers":[],"relativePath":"project/SmartWordBreak/statement/index.md","lastUpdated":1682586876000}'),l={name:"project/SmartWordBreak/statement/index.md"},i=t("",6),r=[i];function c(d,n,s,_,m,p){return a(),o("div",null,r)}const f=e(l,[["render",c]]);export{h as __pageData,f as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as e,o,c as a,R as t}from"./chunks/framework.a304f0f7.js";const l="/logo.png",i="/assets/2.7aeaaf23.png",s="/assets/1.136ffa4a.png",q=JSON.parse('{"title":"个人介绍","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"self/index.md","lastUpdated":1682528161000}'),r={name:"self/index.md"},d=t("",35),c=[d];function p(h,g,m,n,f,u){return o(),a("div",null,c)}const _=e(r,[["render",p]]);export{q as __pageData,_ as default};
|
||||
import{_ as e,o,c as a,R as t}from"./chunks/framework.a304f0f7.js";const l="/logo.png",i="/assets/2.7aeaaf23.png",s="/assets/1.136ffa4a.png",q=JSON.parse('{"title":"个人介绍","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"self/index.md","lastUpdated":1682586876000}'),r={name:"self/index.md"},d=t("",35),c=[d];function p(h,g,m,n,f,u){return o(),a("div",null,c)}const _=e(r,[["render",p]]);export{q as __pageData,_ as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,R as r}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"社区贡献","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/contribution.md","lastUpdated":1682528161000}'),o={name:"works/contribution.md"},n=r('<h1 id="社区贡献" tabindex="-1">社区贡献 <a class="header-anchor" href="#社区贡献" aria-label="Permalink to "社区贡献""></a></h1><h2 id="稀土掘金助手" tabindex="-1">稀土掘金助手 <a class="header-anchor" href="#稀土掘金助手" aria-label="Permalink to "稀土掘金助手""></a></h2><p>稀土掘金助手: 腾讯云函数部署</p><p><a href="https://github.com/ZiuChen/juejin-helper-SCF" target="_blank" rel="noreferrer">源代码</a></p><h2 id="b站粉丝牌助手文档" tabindex="-1">B站粉丝牌助手文档 <a class="header-anchor" href="#b站粉丝牌助手文档" aria-label="Permalink to "B站粉丝牌助手文档""></a></h2><p>B站粉丝牌助手文档</p><p><a href="https://github.com/ZiuChen/fansMedalHelperVersion" target="_blank" rel="noreferrer">源代码</a><a href="https://ziuchen.github.io/fansMedalHelperVersion/" target="_blank" rel="noreferrer">Demo</a></p>',7),i=[n];function s(h,l,c,_,d,p){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{f as __pageData,b as default};
|
||||
import{_ as e,o as a,c as t,R as r}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"社区贡献","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/contribution.md","lastUpdated":1682586876000}'),o={name:"works/contribution.md"},n=r('<h1 id="社区贡献" tabindex="-1">社区贡献 <a class="header-anchor" href="#社区贡献" aria-label="Permalink to "社区贡献""></a></h1><h2 id="稀土掘金助手" tabindex="-1">稀土掘金助手 <a class="header-anchor" href="#稀土掘金助手" aria-label="Permalink to "稀土掘金助手""></a></h2><p>稀土掘金助手: 腾讯云函数部署</p><p><a href="https://github.com/ZiuChen/juejin-helper-SCF" target="_blank" rel="noreferrer">源代码</a></p><h2 id="b站粉丝牌助手文档" tabindex="-1">B站粉丝牌助手文档 <a class="header-anchor" href="#b站粉丝牌助手文档" aria-label="Permalink to "B站粉丝牌助手文档""></a></h2><p>B站粉丝牌助手文档</p><p><a href="https://github.com/ZiuChen/fansMedalHelperVersion" target="_blank" rel="noreferrer">源代码</a><a href="https://ziuchen.github.io/fansMedalHelperVersion/" target="_blank" rel="noreferrer">Demo</a></p>',7),i=[n];function s(h,l,c,_,d,p){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{f as __pageData,b as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,R as r}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"社区贡献","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/contribution.md","lastUpdated":1682528161000}'),o={name:"works/contribution.md"},n=r("",7),i=[n];function s(h,l,c,_,d,p){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{f as __pageData,b as default};
|
||||
import{_ as e,o as a,c as t,R as r}from"./chunks/framework.a304f0f7.js";const f=JSON.parse('{"title":"社区贡献","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/contribution.md","lastUpdated":1682586876000}'),o={name:"works/contribution.md"},n=r("",7),i=[n];function s(h,l,c,_,d,p){return a(),t("div",null,i)}const b=e(o,[["render",s]]);export{f as __pageData,b as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as r,R as t}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"个人作品","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/opensource.md","lastUpdated":1682528161000}'),o={name:"works/opensource.md"},i=t('<h1 id="个人作品" tabindex="-1">个人作品 <a class="header-anchor" href="#个人作品" aria-label="Permalink to "个人作品""></a></h1><h2 id="vue3-typescript后台管理系统" tabindex="-1">Vue3+TypeScript后台管理系统 <a class="header-anchor" href="#vue3-typescript后台管理系统" aria-label="Permalink to "Vue3+TypeScript后台管理系统""></a></h2><p>Vue3+TypeScript后台管理系统</p><p><a href="https://github.com/ZiuChen/vue3-ts-cms" target="_blank" rel="noreferrer">源代码</a></p><h2 id="typein-效率工具集" tabindex="-1">Typein 效率工具集 <a class="header-anchor" href="#typein-效率工具集" aria-label="Permalink to "Typein 效率工具集""></a></h2><p>Typein 是一个运行在现代浏览器上的拓展插件，它可以帮助你在保持专注的情况下，高效完成各种操作。</p><p><a href="https://github.com/ZiuChen/Typein" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://www.bilibili.com/video/BV17F411A7FA" target="_blank" rel="noreferrer">宣传视频</a></p><p><a href="https://microsoftedge.microsoft.com/addons/detail/typein/hfgpceehhndaffdbemhafidaiecdhemi" target="_blank" rel="noreferrer">Microsoft Edge Add-on Store</a></p><h2 id="a-soul浏览器宠物" tabindex="-1">A-SOUL浏览器宠物 <a class="header-anchor" href="#a-soul浏览器宠物" aria-label="Permalink to "A-SOUL浏览器宠物""></a></h2><p>在浏览器里养一只A-Soul成员当宠物</p><p><a href="https://github.com/ZiuChen/A-Soul-Browser-Pet" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://www.bilibili.com/video/BV1gB4y1275J" target="_blank" rel="noreferrer">宣传视频</a></p><h2 id="北京交通大学课程平台功能增强" tabindex="-1">北京交通大学课程平台功能增强 <a class="header-anchor" href="#北京交通大学课程平台功能增强" aria-label="Permalink to "北京交通大学课程平台功能增强""></a></h2><p>北京交通大学课程平台功能增强脚本，实现信息聚合，附件上传，让你高效处理课程信息。</p><p><a href="https://github.com/ZiuChen/NO-FLASH-Upload" target="_blank" rel="noreferrer">源代码</a></p><h2 id="超级剪贴板" tabindex="-1">超级剪贴板 <a class="header-anchor" href="#超级剪贴板" aria-label="Permalink to "超级剪贴板""></a></h2><p>uTools插件，一款强大的剪贴板管理工具。基于Vue3构建</p><p><a href="https://github.com/ZiuChen/ClipboardManager" target="_blank" rel="noreferrer">源代码</a></p><p><a href="./../project/ClipboardManager/">主页</a></p><h2 id="超级粘贴" tabindex="-1">超级粘贴 <a class="header-anchor" href="#超级粘贴" aria-label="Permalink to "超级粘贴""></a></h2><p>uTools插件，将剪切板内容直接粘贴为文件。功能基于NodeJS</p><p><a href="https://github.com/ZiuChen/FileSaver-uTools" target="_blank" rel="noreferrer">源代码</a></p><h2 id="超级分词" tabindex="-1">超级分词 <a class="header-anchor" href="#超级分词" aria-label="Permalink to "超级分词""></a></h2><p>uTools插件，前台使用Vue3+ElementPlus构建，后台基于Express封装结巴分词并暴露API接口</p><h2 id="超级连点器" tabindex="-1">超级连点器 <a class="header-anchor" href="#超级连点器" aria-label="Permalink to "超级连点器""></a></h2><p>uTools插件，界面使用Vue3+AntDesign构建，功能基于Worker</p><h2 id="popnotify" tabindex="-1">PopNotify <a class="header-anchor" href="#popnotify" aria-label="Permalink to "PopNotify""></a></h2><p>仿 Element UI 的通知卡片。</p><p><a href="https://github.com/ZiuChen/PopNotify" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://ziuchen.github.io/PopNotify/demo/Demo.html" target="_blank" rel="noreferrer">Demo</a></p><h2 id="userscripts" tabindex="-1">UserScripts <a class="header-anchor" href="#userscripts" aria-label="Permalink to "UserScripts""></a></h2><p>用户脚本合集，生产力工具、效率工具、自动化脚本</p><p><a href="https://github.com/ZiuChen/userscript" target="_blank" rel="noreferrer">源代码</a></p>',34),h=[i];function p(n,l,s,c,u,d){return a(),r("div",null,h)}const m=e(o,[["render",p]]);export{b as __pageData,m as default};
|
||||
import{_ as e,o as a,c as r,R as t}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"个人作品","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/opensource.md","lastUpdated":1682586876000}'),o={name:"works/opensource.md"},i=t('<h1 id="个人作品" tabindex="-1">个人作品 <a class="header-anchor" href="#个人作品" aria-label="Permalink to "个人作品""></a></h1><h2 id="vue3-typescript后台管理系统" tabindex="-1">Vue3+TypeScript后台管理系统 <a class="header-anchor" href="#vue3-typescript后台管理系统" aria-label="Permalink to "Vue3+TypeScript后台管理系统""></a></h2><p>Vue3+TypeScript后台管理系统</p><p><a href="https://github.com/ZiuChen/vue3-ts-cms" target="_blank" rel="noreferrer">源代码</a></p><h2 id="typein-效率工具集" tabindex="-1">Typein 效率工具集 <a class="header-anchor" href="#typein-效率工具集" aria-label="Permalink to "Typein 效率工具集""></a></h2><p>Typein 是一个运行在现代浏览器上的拓展插件，它可以帮助你在保持专注的情况下，高效完成各种操作。</p><p><a href="https://github.com/ZiuChen/Typein" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://www.bilibili.com/video/BV17F411A7FA" target="_blank" rel="noreferrer">宣传视频</a></p><p><a href="https://microsoftedge.microsoft.com/addons/detail/typein/hfgpceehhndaffdbemhafidaiecdhemi" target="_blank" rel="noreferrer">Microsoft Edge Add-on Store</a></p><h2 id="a-soul浏览器宠物" tabindex="-1">A-SOUL浏览器宠物 <a class="header-anchor" href="#a-soul浏览器宠物" aria-label="Permalink to "A-SOUL浏览器宠物""></a></h2><p>在浏览器里养一只A-Soul成员当宠物</p><p><a href="https://github.com/ZiuChen/A-Soul-Browser-Pet" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://www.bilibili.com/video/BV1gB4y1275J" target="_blank" rel="noreferrer">宣传视频</a></p><h2 id="北京交通大学课程平台功能增强" tabindex="-1">北京交通大学课程平台功能增强 <a class="header-anchor" href="#北京交通大学课程平台功能增强" aria-label="Permalink to "北京交通大学课程平台功能增强""></a></h2><p>北京交通大学课程平台功能增强脚本，实现信息聚合，附件上传，让你高效处理课程信息。</p><p><a href="https://github.com/ZiuChen/NO-FLASH-Upload" target="_blank" rel="noreferrer">源代码</a></p><h2 id="超级剪贴板" tabindex="-1">超级剪贴板 <a class="header-anchor" href="#超级剪贴板" aria-label="Permalink to "超级剪贴板""></a></h2><p>uTools插件，一款强大的剪贴板管理工具。基于Vue3构建</p><p><a href="https://github.com/ZiuChen/ClipboardManager" target="_blank" rel="noreferrer">源代码</a></p><p><a href="./../project/ClipboardManager/">主页</a></p><h2 id="超级粘贴" tabindex="-1">超级粘贴 <a class="header-anchor" href="#超级粘贴" aria-label="Permalink to "超级粘贴""></a></h2><p>uTools插件，将剪切板内容直接粘贴为文件。功能基于NodeJS</p><p><a href="https://github.com/ZiuChen/FileSaver-uTools" target="_blank" rel="noreferrer">源代码</a></p><h2 id="超级分词" tabindex="-1">超级分词 <a class="header-anchor" href="#超级分词" aria-label="Permalink to "超级分词""></a></h2><p>uTools插件，前台使用Vue3+ElementPlus构建，后台基于Express封装结巴分词并暴露API接口</p><h2 id="超级连点器" tabindex="-1">超级连点器 <a class="header-anchor" href="#超级连点器" aria-label="Permalink to "超级连点器""></a></h2><p>uTools插件，界面使用Vue3+AntDesign构建，功能基于Worker</p><h2 id="popnotify" tabindex="-1">PopNotify <a class="header-anchor" href="#popnotify" aria-label="Permalink to "PopNotify""></a></h2><p>仿 Element UI 的通知卡片。</p><p><a href="https://github.com/ZiuChen/PopNotify" target="_blank" rel="noreferrer">源代码</a></p><p><a href="https://ziuchen.github.io/PopNotify/demo/Demo.html" target="_blank" rel="noreferrer">Demo</a></p><h2 id="userscripts" tabindex="-1">UserScripts <a class="header-anchor" href="#userscripts" aria-label="Permalink to "UserScripts""></a></h2><p>用户脚本合集，生产力工具、效率工具、自动化脚本</p><p><a href="https://github.com/ZiuChen/userscript" target="_blank" rel="noreferrer">源代码</a></p>',34),h=[i];function p(n,l,s,c,u,d){return a(),r("div",null,h)}const m=e(o,[["render",p]]);export{b as __pageData,m as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as r,R as t}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"个人作品","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/opensource.md","lastUpdated":1682528161000}'),o={name:"works/opensource.md"},i=t("",34),h=[i];function p(n,l,s,c,u,d){return a(),r("div",null,h)}const m=e(o,[["render",p]]);export{b as __pageData,m as default};
|
||||
import{_ as e,o as a,c as r,R as t}from"./chunks/framework.a304f0f7.js";const b=JSON.parse('{"title":"个人作品","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"works/opensource.md","lastUpdated":1682586876000}'),o={name:"works/opensource.md"},i=t("",34),h=[i];function p(n,l,s,c,u,d){return a(),r("div",null,h)}const m=e(o,[["render",p]]);export{b as __pageData,m as default};
|
||||
@ -1 +1 @@
|
||||
{"article_深入理解浏览器缓存机制.md":"b2eac69d","article_深入理解浏览器运行原理.md":"811243b5","article_【快手】深入理解前端面试题.md":"fd1db545","article_【字节跳动】前端面试题总结.md":"da9d1eec","article_浅析defineproperty与proxy实现的双向绑定.md":"981b1858","article_彻底搞懂对象的数据属性描述符、存储属性描述符.md":"93ffc2d7","article_【用友金融】前端面试题总结.md":"f9565228","article_一文读懂函数中this指向问题.md":"a2e876e0","article_一文读懂伪类与伪元素.md":"b7e97075","article_一文读懂事件冒泡与事件捕获.md":"aa1902b6","article_深入理解proxy与reflect.md":"7dd623e9","article_【2023】青训营 - 前端练习题汇总解析.md":"751c7e25","index.md":"92aa3f05","article_深入javascript数据类型.md":"e8c468fa","note_javascript.md":"5dbfafaa","note_mysql.md":"8ab2ead8","note_ssr.md":"9e639932","project_clipboardmanager_guide_index.md":"89147de8","project_clipboardmanager_index.md":"2a3cb14f","project_clipboardmanager_log_index.md":"714cf9de","project_clipboardmanager_statement_index.md":"95f4a6ec","project_jsrunner_index.md":"47b54e96","project_jsrunner_log_index.md":"cc34efe6","project_markdown_index.md":"69c4ad3a","project_markdown_log_index.md":"c952cd03","project_markdown_shortcut_index.md":"5d0eac56","project_smartwordbreak_index.md":"dc5e4245","project_smartwordbreak_log_index.md":"07b2bd26","project_smartwordbreak_statement_index.md":"8c93a584","self_index.md":"1f3b81e1","works_contribution.md":"c63c44a1","article_从0实现一个年度报告.md":"cfdfead5","project_clipboardmanager_vip_index.md":"453f0553","note_front-end engineering.md":"ca61b8ad","article_深入vue3源码，看看vue.use后究竟发生了什么？.md":"4b28aa3d","works_opensource.md":"aad189b9","note_css.md":"945cb9b3","note_javascriptenhanced.md":"63433dba","note_react.md":"0514d155"}
|
||||
{"note_ssr.md":"f248ec9c","project_clipboardmanager_guide_index.md":"1455cfc8","project_clipboardmanager_log_index.md":"e245d280","project_clipboardmanager_statement_index.md":"01b45ff7","project_clipboardmanager_vip_index.md":"5375ae9a","project_jsrunner_index.md":"97c8b761","project_jsrunner_log_index.md":"5fa1e94d","project_markdown_index.md":"316f1afd","project_markdown_log_index.md":"aab65e4a","project_markdown_shortcut_index.md":"0ea191a3","project_smartwordbreak_index.md":"59e896fe","project_smartwordbreak_log_index.md":"dc4c02ce","project_smartwordbreak_statement_index.md":"e7ffa382","self_index.md":"cd26854a","works_contribution.md":"fe233dc7","works_opensource.md":"6dc8588c","project_clipboardmanager_index.md":"e0db2213","article_浅析defineproperty与proxy实现的双向绑定.md":"627b5302","article_深入vue3源码，看看vue.use后究竟发生了什么？.md":"84a383ed","article_深入理解proxy与reflect.md":"5b8c49e4","article_深入理解浏览器缓存机制.md":"44e94909","note_javascript.md":"d5705bda","article_深入理解浏览器运行原理.md":"4ae70423","index.md":"a39be407","note_front-end engineering.md":"c6edf7d1","article_深入javascript数据类型.md":"986f85d7","article_一文读懂函数中this指向问题.md":"1ffeb261","article_【用友金融】前端面试题总结.md":"9fca7220","article_一文读懂事件冒泡与事件捕获.md":"055b150b","article_一文读懂伪类与伪元素.md":"c653a705","article_【快手】深入理解前端面试题.md":"7657b1d3","article_从0实现一个年度报告.md":"cbf4ba30","article_【字节跳动】前端面试题总结.md":"1f4ca571","article_彻底搞懂对象的数据属性描述符、存储属性描述符.md":"590e5575","article_【2023】青训营 - 前端练习题汇总解析.md":"c9420cf3","note_mysql.md":"0b6704a4","note_css.md":"6a7eedec","note_javascriptenhanced.md":"0ff38e63","note_react.md":"eeaf8749"}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user