mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-12-18 17:04:16 +08:00
Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@60d8a4c6b7 🚀
This commit is contained in:
ZiuChen
@@ -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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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};
|
||||
@@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682252378000}'),e={name:"note/React.md"},t=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",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682335386000}'),e={name:"note/React.md"},t=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-NMcWO" id="tab-1yXBM32" checked="checked"><label for="tab-1yXBM32">context.js</label><input type="radio" name="group-NMcWO" id="tab-UPB9smC"><label for="tab-UPB9smC">App.jsx</label><input type="radio" name="group-NMcWO" id="tab-Q0i-4DP"><label for="tab-Q0i-4DP">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-8OI7y" id="tab-FuhrNwB" checked="checked"><label for="tab-FuhrNwB">context.js</label><input type="radio" name="group-8OI7y" id="tab-njYMC7o"><label for="tab-njYMC7o">App.jsx</label><input type="radio" name="group-8OI7y" id="tab-q83Yuuv"><label for="tab-q83Yuuv">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>
|
||||
@@ -1 +1 @@
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682252378000}'),e={name:"note/React.md"},t=l("",523),c=[t];function r(F,D,y,i,C,A){return n(),a("div",null,c)}const m=s(e,[["render",r]]);export{u as __pageData,m as default};
|
||||
import{_ as s,o as n,c as a,R as l}from"./chunks/framework.a304f0f7.js";const p="/assets/react-life-cycle.67e890c0.png",o="/assets/prototype-setState.e1acb60c.png",u=JSON.parse('{"title":"React","description":"","frontmatter":{},"headers":[],"relativePath":"note/React.md","lastUpdated":1682335386000}'),e={name:"note/React.md"},t=l("",523),c=[t];function r(F,D,y,i,C,A){return n(),a("div",null,c)}const m=s(e,[["render",r]]);export{u as __pageData,m as default};
|
||||
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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),_={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":1682335386000}'),_={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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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
assets/project_JSRunner_log_index.md.0a626a78.js
Normal file
1
assets/project_JSRunner_log_index.md.0a626a78.js
Normal file
@@ -0,0 +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":1682335386000}'),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
assets/project_JSRunner_log_index.md.0a626a78.lean.js
Normal file
1
assets/project_JSRunner_log_index.md.0a626a78.lean.js
Normal file
@@ -0,0 +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":1682335386000}'),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 +0,0 @@
|
||||
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":1682252378000}'),r={name:"project/JSRunner/log/index.md"},i=o('<h1 id="更新日志" tabindex="-1">更新日志 <a class="header-anchor" href="#更新日志" aria-label="Permalink to "更新日志""></a></h1><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>',7),l=[i];function n(c,d,s,_,h,p){return a(),t("div",null,l)}const m=e(r,[["render",n]]);export{f as __pageData,m as default};
|
||||
@@ -1 +0,0 @@
|
||||
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":1682252378000}'),r={name:"project/JSRunner/log/index.md"},i=o("",7),l=[i];function n(c,d,s,_,h,p){return a(),t("div",null,l)}const m=e(r,[["render",n]]);export{f as __pageData,m 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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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":1682252378000}'),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":1682335386000}'),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};
|
||||
Reference in New Issue
Block a user