-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (98 loc) · 38.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="zh"><head><meta charset="utf-8"><meta name="generator" content="Hexo 4.2.0"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>Wee's Blog</title><meta property="og:type" content="blog"><meta property="og:title" content="Wee's Blog"><meta property="og:url" content="http://weechou1118.github.io/"><meta property="og:site_name" content="Wee's Blog"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="http://weechou1118.github.io/img/og_image.png"><meta property="article:author" content="Wee Chou"><meta property="twitter:card" content="summary"><meta property="twitter:image" content="/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://weechou1118.github.io"},"headline":"Wee's Blog","image":["http://weechou1118.github.io/img/og_image.png"],"author":{"@type":"Person","name":"Wee Chou"},"description":""}</script><link rel="icon" href="/img/favicon.svg"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.min.css"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script></head><body class="is-3-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/img/logo.svg" alt="Wee's Blog" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">首页</a><a class="navbar-item" href="/archives">归档</a><a class="navbar-item" href="/categories">分类</a><a class="navbar-item" href="/tags">标签</a><a class="navbar-item" href="/about">关于</a></div><div class="navbar-end"><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-6-widescreen"><div class="card"><div class="card-image"><a class="image is-7by3" href="/2023/03/03/2023%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/"><img class="thumbnail" src="/img/thumbnail/girl.jpg" alt="2023前端学习"></a></div><article class="card-content article" role="article"><div class="article-meta size-small is-uppercase level is-mobile"><div class="level-left"><time class="level-item" dateTime="2023-03-03T03:20:55.000Z" title="2023-03-03T03:20:55.000Z">2023-03-03</time><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span> / </span><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%97%A5%E8%AE%B0/">日记</a></span><span class="level-item">22 分钟 读完 (大约 3322 个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2023/03/03/2023%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/">2023前端学习</a></h1><div class="content"><h2 id="1-4"><a href="#1-4" class="headerlink" title="1.4"></a>1.4</h2><h3 id="啥是微前端？"><a href="#啥是微前端？" class="headerlink" title="啥是微前端？"></a>啥是微前端？</h3><ul>
<li>微前端就是可以一个页面跑多个 vue、react 甚至 jquery 等不同项目，它之间的 JS、CSS 相互隔离运行，不会相互影响，但也有通信机制可以通信。</li>
<li>其实也简单，一句话就可以说明白：<strong>当路由切换的时候，去下载对应应用的代码，然后跑在容器里。</strong></li>
</ul>
<h2 id="1-5"><a href="#1-5" class="headerlink" title="1.5"></a>1.5</h2><h3 id="Vue当中的虚拟DOM工作原理（简述）"><a href="#Vue当中的虚拟DOM工作原理（简述）" class="headerlink" title="Vue当中的虚拟DOM工作原理（简述）"></a>Vue当中的虚拟DOM工作原理（简述）</h3><ul>
<li>首先我们会将 <code>html</code>内容填入Vue文件的 <code><template></code> 标签当中</li>
<li>然后Vue中的<code>render</code>函数会将模板中的<code>html</code>内容转换成虚拟DOM【编译器模块】<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// render 函数类似这样</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">render</span>(<span class="params">h</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> h(<span class="string">'div'</span>, <span class="string">'hello'</span>) <span class="comment">// return vnode</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 虚拟DOM，本质是一个Javascript对象</span></span><br><span class="line">{</span><br><span class="line"> tag: <span class="string">'div'</span>,</span><br><span class="line"> children: [</span><br><span class="line"> {</span><br><span class="line"> text: <span class="string">'hello'</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li>
<li>（如果在首次<code>render</code>之后改动<code>html</code>内容，Vue会将新的虚拟节点和旧的虚拟节点进行比较，最后以高效的方式在网页上更新，即只更新<code>html</code>变化的部分）【渲染模块】</li>
<li>最后Vue会将虚拟节点转化成真实DOM呈现在浏览器中</li>
</ul>
<h3 id="模块执行顺序（响应模块、编译器模块、渲染模块）"><a href="#模块执行顺序（响应模块、编译器模块、渲染模块）" class="headerlink" title="模块执行顺序（响应模块、编译器模块、渲染模块）"></a>模块执行顺序（响应模块、编译器模块、渲染模块）</h3><p>【声明】模板，响应式对象</p>
<ul>
<li>编译器模块将手敲的模板转化成渲染函数（render function）</li>
<li>使用响应式模块，初始化响应式对象</li>
<li>观察响应对象的变化，render函数会返回一个虚拟节点，然后在组件挂载阶段（渲染模块包括挂载mount阶段和补丁patch阶段，其中补丁阶段只用于更新，mount阶段用于初始化节点），调用mount函数，使用虚拟DOM节点创建web页面。</li>
</ul>
<p>Dep → dependency</p></div><a class="article-more button is-small size-small" href="/2023/03/03/2023%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/"><img class="thumbnail" src="/img/thumbnail/mountainpink.jpg" alt="2022从9.16开始转移到这"></a></div><article class="card-content article" role="article"><div class="article-meta size-small is-uppercase level is-mobile"><div class="level-left"><time class="level-item" dateTime="2022-12-10T02:29:34.000Z" title="2022-12-10T02:29:34.000Z">2022-12-10</time><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span> / </span><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%97%A5%E8%AE%B0/">日记</a></span><span class="level-item">13 分钟 读完 (大约 1949 个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/">2022从9.16开始转移到这</a></h1><div class="content"><h2 id="9-16"><a href="#9-16" class="headerlink" title="9.16"></a>9.16</h2><p>无</p>
<h2 id="10-12"><a href="#10-12" class="headerlink" title="10.12"></a>10.12</h2><blockquote>
<p>一些git 的高级用法</p>
</blockquote>
<h3 id="git-reflog"><a href="#git-reflog" class="headerlink" title="git reflog"></a>git reflog</h3><p>介绍：用来查看你的所有操作记录。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">30ffd23df4 (HEAD -> hotfix/v4.58.1, origin/hotfix/v4.58.1) HEAD@{0}: reset: moving to HEAD</span><br><span class="line">30ffd23df4 (HEAD -> hotfix/v4.58.1, origin/hotfix/v4.58.1) HEAD@{1}: pull --tags origin hotfix/v4.58.1: Fast-forward</span><br><span class="line">7ffbb01b45 HEAD@{2}: pull --tags origin hotfix/v4.58.1: Fast-forward</span><br><span class="line">80e253f34e HEAD@{3}: pull --tags origin hotfix/v4.58.1: Fast-forward</span><br></pre></td></tr></table></figure>
<p>使用场景：配合git reset —hard commitId，可以实现比较灵活的版本跳转</p>
<h2 id="10-13"><a href="#10-13" class="headerlink" title="10.13"></a>10.13</h2><blockquote>
<p>逛下掘金</p>
</blockquote>
<ul>
<li>图片压缩好网站: <a href="https://tinypng.com/" title="https://tinypng.com/">https://tinypng.com/</a></li>
</ul>
<h2 id="10-14"><a href="#10-14" class="headerlink" title="10.14"></a>10.14</h2><blockquote>
<p>最后一天班,得好好学一天</p>
</blockquote>
<h3 id="📍跟着教程了解一下SEO"><a href="#📍跟着教程了解一下SEO" class="headerlink" title="📍跟着教程了解一下SEO"></a><strong>📍跟着教程了解一下SEO</strong></h3><p>搜索引擎的实现原理是爬虫。爬虫能够有效跟踪页面之间的链接，以查找要添加到索引中的新内容。使用搜索引擎时，将从索引当中提取相关结果，并用算法给其进行排名。</p>
<p>结果发现是广告，那就不做笔记了，随便看看吧🐶</p>
<hr>
<p>递归组件相关的知识，可以看一下，好像很神奇</p>
<p><a href="https://blog.csdn.net/sinat_17775997/article/details/110918047" title="https://blog.csdn.net/sinat_17775997/article/details/110918047">https://blog.csdn.net/sinat_17775997/article/details/110918047</a></p>
<p><img src="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/image_4mTazt6iyn.png" alt></p>
<hr>
<p>📖<strong>前后端分离→CSR，对应服务端渲染→SSR</strong></p>
<p><img src="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/image_dYm_lhMOQ6.png" alt></p>
<p>⚠️以后不要因为复杂度的原因跳过eslint扫描了，不然以后别人在这个分支下提交代码都会有复杂度的报错</p></div><a class="article-more button is-small size-small" href="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2022/10/27/%E7%90%86%E8%A7%A3%E8%99%9A%E6%8B%9FDOM/"><img class="thumbnail" src="/img/thumbnail/contractdraw.jpg" alt="理解虚拟DOM"></a></div><article class="card-content article" role="article"><div class="article-meta size-small is-uppercase level is-mobile"><div class="level-left"><time class="level-item" dateTime="2022-10-27T07:15:36.000Z" title="2022-10-27T07:15:36.000Z">2022-10-27</time><span class="level-item"><a class="link-muted" href="/categories/React/">React</a><span> / </span><a class="link-muted" href="/categories/React/%E8%99%9A%E6%8B%9Fdom/">虚拟dom</a></span><span class="level-item">3 分钟 读完 (大约 376 个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2022/10/27/%E7%90%86%E8%A7%A3%E8%99%9A%E6%8B%9FDOM/">理解虚拟DOM</a></h1><div class="content"><blockquote>
<p>虚拟DOM并不是什么神奇的东西，它只是用来描述真实DOM的Javascript对象而已。</p>
</blockquote>
<p> 在传统的前端开发中，我们会大量使用DOM提供的API，直接对DOM进行增删改查一系列操作，然而每进行一次DOM操作，都会使页面重新渲染，相对来讲这是很消耗性能的。因此在前端优化中有一条原则：尽量减少DOM操作。</p>
<p> 而虚拟DOM可以作为真实DOM的抽象，有其同等的作用，且更高效。它是一个独立的技术，只不过React使用了这项技术来提高自身性能。</p>
<p> 在React的JSX中，每一个标签其实都可以用js来描述，例如以下DOM结构：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><div className=<span class="string">'foo'</span>></span><br><span class="line"> <h1>Hello React<<span class="regexp">/h1></span></span><br><span class="line"><span class="regexp"></</span>div></span><br></pre></td></tr></table></figure></div><a class="article-more button is-small size-small" href="/2022/10/27/%E7%90%86%E8%A7%A3%E8%99%9A%E6%8B%9FDOM/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2022/08/06/%E5%89%8D%E7%AB%AF%E6%9D%82%E8%B0%88/"><img class="thumbnail" src="/img/road.jpg" alt="前端杂谈"></a></div><article class="card-content article" role="article"><div class="article-meta size-small is-uppercase level is-mobile"><div class="level-left"><time class="level-item" dateTime="2022-08-06T08:52:32.000Z" title="2022-08-06T08:52:32.000Z">2022-08-06</time><span class="level-item"><a class="link-muted" href="/categories/front-end-issues/">front end issues</a></span><span class="level-item">4 分钟 读完 (大约 566 个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2022/08/06/%E5%89%8D%E7%AB%AF%E6%9D%82%E8%B0%88/">前端杂谈</a></h1><div class="content"><blockquote>
<p>Recorder: Wee Chou</p>
</blockquote>
<ul>
<li><p>z-index仅同级Element有效,父子关系只需修改子元素</p>
</li>
<li><p>npm init –yes 生成package.js 且全部选yes选项</p>
</li>
<li><p><code>**Element.closest()**</code> 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 <code>null</code>。 很重要!!!!在事件委托上很常用</p>
</li>
<li><p>getBoundingClientRect() 获取坐标， 当元素没有left top值时，通过获取坐标来获取位置参数。 很重要！！！！</p>
</li>
</ul>
<ul>
<li><p>element.insertAdjacentHTML(position, text)</p>
</li>
<li><p>回流必将引起重绘, 而重绘不一定会引起回流(回流: 改变元素的布局或尺寸…;重绘: 仅改变元素的外观,不会影响布局)</p>
</li>
<li><p>基线总是与行内高度最高的元素一致的</p>
</li>
<li><p>边缘折叠,两个边距中较小的边距被较大的边距所取代</p>
</li>
<li><p>负页边距确实会对垂直格式产生影响，并影响页边距的折叠方式</p>
</li>
<li><p>vertical-align 改变基线的位置</p>
</li>
<li><p>display: grid; 网格布局 很好用</p></li></ul></div><a class="article-more button is-small size-small" href="/2022/08/06/%E5%89%8D%E7%AB%AF%E6%9D%82%E8%B0%88/#more">阅读更多</a></article></div><nav class="pagination is-centered mt-4" role="navigation" aria-label="pagination"><div class="pagination-previous is-invisible is-hidden-mobile"><a href="/page/0/">上一页</a></div><div class="pagination-next"><a href="/page/2/">下一页</a></div><ul class="pagination-list is-hidden-mobile"><li><a class="pagination-link is-current" href="/">1</a></li><li><a class="pagination-link" href="/page/2/">2</a></li><li><span class="pagination-ellipsis">…</span></li><li><a class="pagination-link" href="/page/6/">6</a></li></ul></nav></div><div class="column column-left is-4-tablet is-4-desktop is-3-widescreen order-1 is-sticky"><div class="card widget"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="is-rounded" src="/img/avatar.jpg" alt="Wee Chou"></figure><p class="title is-size-4 is-block line-height-inherit">Wee Chou</p><p class="is-size-6 is-block">KEEP GOING</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>China</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><a href="/archives"><p class="title">24</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories"><p class="title">29</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags"><p class="title">30</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/weechou1118" target="_blank" rel="noopener">关注我</a></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">链接</h3><ul class="menu-list"><li><a class="level is-mobile is-mobile" href="http://rainlu.gitee.io/blog/" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">Lu</span></span><span class="level-right"><span class="level-item tag">rainlu.gitee.io</span></span></a></li><li><a class="level is-mobile is-mobile" href="https://xugaoyi.com/" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">Evan</span></span><span class="level-right"><span class="level-item tag">xugaoyi.com</span></span></a></li><li><a class="level is-mobile is-mobile" href="http://acgtofe.com/posts/2021/03/web-emoji-input" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">acgtofe</span></span><span class="level-right"><span class="level-item tag">acgtofe.com</span></span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><a class="media-left" href="/2023/03/03/2023%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/"><p class="image is-64x64"><img class="thumbnail" src="/img/thumbnail/girl.jpg" alt="2023前端学习"></p></a><div class="media-content size-small"><p><time dateTime="2023-03-03T03:20:55.000Z">2023-03-03</time></p><p class="title is-6"><a class="link-muted" href="/2023/03/03/2023%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/">2023前端学习</a></p><p class="is-uppercase"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%97%A5%E8%AE%B0/">日记</a></p></div></article><article class="media"><a class="media-left" href="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/"><p class="image is-64x64"><img class="thumbnail" src="/img/thumbnail/mountainpink.jpg" alt="2022从9.16开始转移到这"></p></a><div class="media-content size-small"><p><time dateTime="2022-12-10T02:29:34.000Z">2022-12-10</time></p><p class="title is-6"><a class="link-muted" href="/2022/12/10/2022%E4%B8%8B%E5%8D%8A%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%97%A5%E8%AE%B0/">2022从9.16开始转移到这</a></p><p class="is-uppercase"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/%E6%97%A5%E8%AE%B0/">日记</a></p></div></article><article class="media"><a class="media-left" href="/2022/10/27/%E7%90%86%E8%A7%A3%E8%99%9A%E6%8B%9FDOM/"><p class="image is-64x64"><img class="thumbnail" src="/img/thumbnail/contractdraw.jpg" alt="理解虚拟DOM"></p></a><div class="media-content size-small"><p><time dateTime="2022-10-27T07:15:36.000Z">2022-10-27</time></p><p class="title is-6"><a class="link-muted" href="/2022/10/27/%E7%90%86%E8%A7%A3%E8%99%9A%E6%8B%9FDOM/">理解虚拟DOM</a></p><p class="is-uppercase"><a class="link-muted" href="/categories/React/">React</a> / <a class="link-muted" href="/categories/React/%E8%99%9A%E6%8B%9Fdom/">虚拟dom</a></p></div></article><article class="media"><a class="media-left" href="/2022/08/06/%E5%89%8D%E7%AB%AF%E6%9D%82%E8%B0%88/"><p class="image is-64x64"><img class="thumbnail" src="/img/road.jpg" alt="前端杂谈"></p></a><div class="media-content size-small"><p><time dateTime="2022-08-06T08:52:32.000Z">2022-08-06</time></p><p class="title is-6"><a class="link-muted" href="/2022/08/06/%E5%89%8D%E7%AB%AF%E6%9D%82%E8%B0%88/">前端杂谈</a></p><p class="is-uppercase"><a class="link-muted" href="/categories/front-end-issues/">front end issues</a></p></div></article><article class="media"><a class="media-left" href="/2022/07/15/%E8%8A%82%E6%B5%81%E9%98%B2%E6%8A%96/"><p class="image is-64x64"><img class="thumbnail" src="/img/thumbnail/sunset.jpg" alt="节流防抖"></p></a><div class="media-content size-small"><p><time dateTime="2022-07-15T02:39:13.000Z">2022-07-15</time></p><p class="title is-6"><a class="link-muted" href="/2022/07/15/%E8%8A%82%E6%B5%81%E9%98%B2%E6%8A%96/">节流防抖</a></p><p class="is-uppercase"><a class="link-muted" href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">性能优化</a></p></div></article></div></div><div class="column-right-shadow is-hidden-widescreen is-sticky"></div></div><div class="column column-right is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only order-3 is-sticky"><!--!--><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-mobile is-marginless" href="/categories/Flask/"><span class="level-start"><span class="level-item">Flask</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/Flask/models/"><span class="level-start"><span class="level-item">models</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/"><span class="level-start"><span class="level-item">Javascript</span></span><span class="level-end"><span class="level-item tag">9</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/Javascript/ES6/"><span class="level-start"><span class="level-item">ES6</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/async/"><span class="level-start"><span class="level-item">async</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/event/"><span class="level-start"><span class="level-item">event</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/new%E5%85%B3%E9%94%AE%E5%AD%97/"><span class="level-start"><span class="level-item">new关键字</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/%E4%BD%9C%E7%94%A8%E5%9F%9F/"><span class="level-start"><span class="level-item">作用域</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/%E5%8E%9F%E5%9E%8B/"><span class="level-start"><span class="level-item">原型</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/%E8%8A%82%E6%B5%81%E9%98%B2%E6%8A%96/"><span class="level-start"><span class="level-item">节流防抖</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Javascript/%E9%97%AD%E5%8C%85/"><span class="level-start"><span class="level-item">闭包</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/Mac-OS/"><span class="level-start"><span class="level-item">Mac OS</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/Mac-OS/%E5%BA%94%E7%94%A8%E6%8E%A8%E8%8D%90/"><span class="level-start"><span class="level-item">应用推荐</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/Nuxt/"><span class="level-start"><span class="level-item">Nuxt</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/Nuxt/start/"><span class="level-start"><span class="level-item">start</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/React/"><span class="level-start"><span class="level-item">React</span></span><span class="level-end"><span class="level-item tag">6</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/React/Create-React-App/"><span class="level-start"><span class="level-item">Create React App</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/React/Hook/"><span class="level-start"><span class="level-item">Hook</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/React/ToDoList/"><span class="level-start"><span class="level-item">ToDoList</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/React/redux-saga/"><span class="level-start"><span class="level-item">redux-saga</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/React/%E8%99%9A%E6%8B%9Fdom/"><span class="level-start"><span class="level-item">虚拟dom</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/React/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E6%B1%A1%E6%9F%93/"><span class="level-start"><span class="level-item">解决样式污染</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/Vue/"><span class="level-start"><span class="level-item">Vue</span></span><span class="level-end"><span class="level-item tag">1</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/Vue/Vue-cli2-x/"><span class="level-start"><span class="level-item">Vue-cli2.x</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/front-end-issues/"><span class="level-start"><span class="level-item">front end issues</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/"><span class="level-start"><span class="level-item">前端</span></span><span class="level-end"><span class="level-item tag">2</span></span></a><ul class="mr-0"><li><a class="level is-mobile is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/%E6%97%A5%E8%AE%B0/"><span class="level-start"><span class="level-item">日记</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></li><li><a class="level is-mobile is-marginless" href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"><span class="level-start"><span class="level-item">性能优化</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/%E7%AE%97%E6%B3%95/"><span class="level-start"><span class="level-item">算法</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-mobile is-marginless" href="/archives/2023/03/"><span class="level-start"><span class="level-item">三月 2023</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2022/12/"><span class="level-start"><span class="level-item">十二月 2022</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2022/10/"><span class="level-start"><span class="level-item">十月 2022</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2022/08/"><span class="level-start"><span class="level-item">八月 2022</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2022/07/"><span class="level-start"><span class="level-item">七月 2022</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/12/"><span class="level-start"><span class="level-item">十二月 2020</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/09/"><span class="level-start"><span class="level-item">九月 2020</span></span><span class="level-end"><span class="level-item tag">6</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/08/"><span class="level-start"><span class="level-item">八月 2020</span></span><span class="level-end"><span class="level-item tag">10</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/05/"><span class="level-start"><span class="level-item">五月 2020</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/CSS-module/"><span class="tag">CSS module</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Diff/"><span class="tag">Diff</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ECMAScript-6/"><span class="tag">ECMAScript 6</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/ES7/"><span class="tag">ES7</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Flask/"><span class="tag">Flask</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Hook/"><span class="tag">Hook</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Javascript/"><span class="tag">Javascript</span><span class="tag is-grey-lightest">10</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Node/"><span class="tag">Node</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Nuxt/"><span class="tag">Nuxt</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Promise/"><span class="tag">Promise</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span><span class="tag is-grey-lightest">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Redux/"><span class="tag">Redux</span><span class="tag is-grey-lightest">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vue/"><span class="tag">Vue</span><span class="tag is-grey-lightest">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vue-cli2-x/"><span class="tag">Vue-cli2.x</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Webpack/"><span class="tag">Webpack</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/async/"><span class="tag">async</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/debounce/"><span class="tag">debounce</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/issues/"><span class="tag">issues</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/javascript/"><span class="tag">javascript</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/less/"><span class="tag">less</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/less-loader/"><span class="tag">less-loader</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/macos/"><span class="tag">macos</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/new/"><span class="tag">new</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/redux-saga/"><span class="tag">redux-saga</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/vdom/"><span class="tag">vdom</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF/"><span class="tag">前端</span><span class="tag is-grey-lightest">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%BC%82%E6%AD%A5/"><span class="tag">异步</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"><span class="tag">性能优化</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E6%97%A5%E8%AE%B0/"><span class="tag">日记</span><span class="tag is-grey-lightest">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E7%AE%97%E6%B3%95/"><span class="tag">算法</span><span class="tag is-grey-lightest">1</span></a></div></div></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="/img/logo.svg" alt="Wee's Blog" height="28"></a><p class="size-small"><span>© 2023 Wee Chou</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p></div><div class="level-end"></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment-with-locales.min.js"></script><script>moment.locale("zh-CN");</script><script>var IcarusThemeSettings = {
site: {
url: 'http://weechou1118.github.io',
external_link: {"enable":true,"exclude":[]}
},
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js" defer></script><script src="/js/animation.js"></script><a id="back-to-top" title="回到顶端" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script src="/js/back_to_top.js" defer></script><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><!--!--><script src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="想要查找什么..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script src="/js/insight.js" defer></script><script>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"想要查找什么...","untitled":"(无标题)","posts":"文章","pages":"页面","categories":"分类","tags":"标签"});
});</script></body></html>